1.CardViewç使ç¨
2.Android零基础入门第71节:CardView简单实现卡片式布局
CardViewç使ç¨
Material Designä¸æä¸ç§å¾ä¸ªæ§ç设计æ¦å¿µï¼å¡çå¼è®¾è®¡ï¼Cardsï¼ï¼Cardsæ¥æèªå·±ç¬ç¹çUIç¹å¾ï¼å ³äºCardsç设计è§èå¯ä»¥åèå®ç½ä»ç»ï¼cards-usage
Googleå¨v7å ä¸å¼è¿äºä¸ç§å ¨æ°çæ§ä»¶CardViewï¼ç¨æ¥å®ç°è¿ç§ Cards UI ç设计.
使ç¨åæ·»å ä¾èµï¼
CardViewæ¬è´¨ä¸å±äºFrameLayoutï¼ä¸åçæ¯ï¼å®å¤äºå¾å¤"ç¹æ"ï¼åè§ãé´å½±çï¼.
å¯ä»¥çè§ï¼è¢«CardViewå 裹çImageViewæææ¾çåè§åé´å½±ï¼è¿å°±æ¯CardViewæéè¦ç两æ¡å±æ§äº.
Android5.0 å¼å ¥äºZè½´çæ¦å¿µï¼å¯ä»¥è®©ç»ä»¶åç°3Dææ.
çä¸é¢è¿å¹ å¾ï¼
Zå±æ§å¯ä»¥éè¿elevationåtranslationZè¿è¡ä¿®æ¹
Zï¼ elevationï¼translationZ
å¨5.0ä¹åï¼æ们å¦ææ³ç»Viewæ·»å é´å½±ææï¼ä»¥ä½ç°å ¶å±æ¬¡æï¼é常çåæ³æ¯ç»View设置ä¸ä¸ªå¸¦é´å½±çèæ¯å¾ç.
å¨5.0ä¹åï¼æ们åªéè¦ç®åçä¿®æ¹ViewçZå±æ§ï¼å°±è½è®©å ¶å ·å¤é´å½±çå±æ¬¡æï¼ä¸è¿è¦æ±çæ¬è³å°5.0 Lollipop,ä¹å°±æ¯API.
å¨Android Design Support Libraryåsupport -v7ä¸ä¸äºç»ä»¶å·²ç»å°è£ 好äºZå±æ§ï¼ä¸éè¦5.0 å°±å¯ä»¥ä½¿ç¨.
å FloatingActionButton å°±å¯ä»¥éè¿app:elevation=" "使ç¨Zå±æ§ï¼CardViewå¯ä»¥éè¿app:cardElevation=" " æ¥ä½¿ç¨.
å ³äºZè½´çæ´å¤ä»ç»ï¼å¯ä»¥è§ç å®æ¹ï¼å®ä¹é´å½±ä¸è£åªè§å¾ .
1ã设置èæ¯é¢è²
2ã设置padding
Tips:ä¸é¢æ¯CardView设置èæ¯é¢è²åpaddingçæ¹å¼ï¼å¦æä½ ç´æ¥éè¿android:padding=" " åandroid:background=" "设置ï¼æ¯æ æç.
3ã设置Zè½´çæ大é«åº¦
4ãç¹å»ä¹åçæ¶æ¼ªææ
å¦æä½ çCardViewæ¯å¯ç¹å»çï¼å¯ä»¥éè¿foregroundå±æ§ä½¿ç¨ç³»ç»å®ä¹å¥½çRippleDrawable: selectableItemBackgroundï¼ä»èè¾¾å°å¨5.0å以ä¸çæ¬ç³»ç»ä¸å®ç°ç¹å»æ¶çæ¶æ¼ªææï¼Rippleï¼ï¼å¦å¾ï¼
çä¸é¢ä¸¤å¹ å¾:
å¨5.0ä¹åççæ¬ä¸è®¾ç½®äº app:cardElevation=" "å CardView ä¼èªå¨çåºç©ºé´ä¾é´å½±æ¾ç¤ºï¼è5.0ä¹åççæ¬ä¸æ²¡æé¢ç空é´.
å®ç½ä¹ä»ç»äºè¿ç§æ åµ:
æ以ç»CardView设置 Marginæ¶éè¦å ¼å®¹ä¸ä¸ï¼å¦åå¨ä½çæ¬ä¸æ¯ä¸ªå¡çä¹é´çè·ç¦»ä¼ç¹å«å¤§ï¼æµªè´¹å±å¹ç©ºé´.
解å³æ¹æ³1:
å¨res/values/dimensä¸è®¾ç½®ä¸ä¸ª0dpçmarginï¼è¿æ¯ä¸º5.0ä¹åçæ¬ä½¿ç¨ç
å¨res/values-v/dimensä¸è®¾ç½®ä¸ä¸ªéåçmarginï¼ä¸ºé´å½±é¢ç空é´ï¼è¿æ¯ä¸º5.0ä¹åçæ¬ä½¿ç¨ç
æåï¼ç»CardView设置å¤è¾¹è·android:layout_margin="@dimen/cardview_margin"ï¼è¿æ ·å°±è§£å³äºä½çæ¬ä¸è¾¹è·è¿å¤§æµªè´¹å±å¹ç©ºé´çé®é¢äº.
解å³æ¹æ³2:ç´æ¥ç»CardView设置该å±æ§ï¼
çä¸é¢ä¸¤å¹ å¾:
å¨>=5.0ï¼Lollipop API ï¼ççæ¬ï¼CardViewä¼ç´æ¥è£åªå 容å ç´ æ»¡è¶³åè§çéæ±.
å¨<5.0ï¼Lollipop API ï¼ççæ¬ï¼CardView为äºä½¿å 容å ç´ ä¸ä¼è¦çCardViewçåè§ï¼ä¼æ·»å ä¸ä¸ªpaddingï¼è¿æ ·ä¸æ¥ï¼å¦æCardView设置äºèæ¯é¢è²ï¼å°±å¾é¾çäº.
解å³æ¹æ³ï¼ç»CardView设置该å±æ§ï¼
æ»çæ¥è¯´ï¼å¦æå¨é«çæ¬ä¸ä½¿ç¨CardViewè¿æ¯å¾èæçï¼å¾å®¹æå®ç°åç§ææï¼ä½çæ¬ä¸å ¼å®¹æ§è¿ä¸æ¯å¾å¥½.
Android零基础入门第节:CardView简单实现卡片式布局
CardView控件简介与示例
CardView是Android 5.0系统引入的控件,主要应用于添加圆角及阴影效果的卡片式布局。它继承自Framelayout,因此可以继承FrameLayout的所有属性,并拥有专属属性,game res源码如app:cardElevation设置阴影大小等。中规线公式源码
CardView示例1
在WidgetSample工程的advancedviewsample模块中,添加CardView依赖库并创建cardview_layout.xml布局文件,填充代码以展示CardView效果。在CardViewActivity.java中加载布局文件并运行程序,可以看到CardView的布局效果。
CardView示例2
CardView常用于ListView和RecyclerView的Item布局,显示层次性内容,没有源码的指标有助于区分列表内容。创建CardView的item项,修改属性,结合ListView和RecyclerView实现动态修改属性的源码编辑器好处效果。运行程序,展示CardView的动态变化。
CardView使用总结
CardView学习至此,使用简单,amo计算公式源码适用于显示层次性内容和列表/网格显示。更多高级用法需自行探索。欢迎提问和加入Android技术讨论群。
往期内容推荐
Android零基础入门系列教程
涵盖UI控件、UI布局、事件处理、列表和网格布局、事件处理、数据展示组件等内容,提供从零开始学习Android开发的全面指南。
更多教程内容请关注微信公众号:ShareExpert - 鑫鱻,获取完整教程和学习资源。