1. 程式人生 > >Android基礎學習筆記之-ListView進階用法(item圓角效果實現)

Android基礎學習筆記之-ListView進階用法(item圓角效果實現)

今天簡單用快取優化方式實現了listview的功能,下面讓我們實現一下上篇文章留下來的改進方案:

    1).實現item佈局的圓角效果

    2).對listview的item進行監聽

首先,我們考慮一下該如何實現listview中item的圓角效果呢?

 1. 想法一:通過最普遍的方式-- shape屬性定義來實現

這種方式需要在drawable目錄下建立shape型別的xml檔案來對圓角相關屬性進行設定,說到做到,那麼讓我們來試一下看看吧:

先建立shape屬性檔案item_shape.xml:

<?xml version="1.0" encoding="utf-8"

?>

<shape xmlns:="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

    <corners android:radius="12dp"

/>

    <solid android:color="#ff77"/>

    <stroke android:color="#22ddff"/>

</shape>

至於shape的相關屬性如果不熟悉可以百度一下,設定好角度,填充顏色和線條之後,我們就放在佈局當中用一下吧:

只需要在listview_item的佈局檔案最上面的父容器中加上

android:background="@drawable/item_shape"

即可,執行一下,發現item的間隔色彩影響美感,所以需要將listview的屬性android:divider="#ffffff"就ok

關於listview的常用屬性,大家可以看一下這個文章:http://blog.csdn.NET/avenleft/article/details/7334060

接下來執行一把看看效果吧:

感覺比之前文章中的效果好看了很多,看來這種shape方法是可以實現listview的item圓角效果的。

2.想法二:通過CardView來實現listview中item的圓角效果

首先讓我們來認識一下CardView吧:

CardView是android5.0之後的新控制元件,如其名,像卡片一樣的控制元件。

  1. publicclass CardView extends FrameLayout implements CardViewDelegate {  
  2.             ...  
  3.     }  

從程式碼來看,CardView繼承自FrameLayout,所以CardView是一個ViewGroup,裡面可以新增多個控制元件。下面來看看它有哪些基本屬性:

app:cardBackgroundColor這是設定背景顏色 
app:cardCornerRadius這是設定圓角大小 
app:cardElevation這是設定z軸的陰影 
app:cardMaxElevation這是設定z軸的最大高度值 
app:cardUseCompatPadding是否使用CompatPadding 
app:cardPreventCornerOverlap是否使用PreventCornerOverlap 
app:contentPadding 設定內容的padding 
app:contentPaddingLeft 設定內容的左padding 
app:contentPaddingTop 設定內容的上padding 
app:contentPaddingRight 設定內容的右padding 
app:contentPaddingBottom 設定內容的底padding

從屬性來看,可以驚喜地發現裡面含有設定圓角的相關屬性,對,這就是我們為什麼用cardview的原因,讓我們來看看該如何將它應用到listview當中吧:

 首先匯入CardView的控制元件包,以android studio為例,從project stucpture中點選加號,然後找到support.v7.widget.CardView包,等待依賴就好了。

然後新建一個listview_item_cardview佈局檔案,在裡面新增相關屬性,上面都有,這裡直接上程式碼:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <android.support.v7.widget.CardView
android:id="@+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#fedd99"
app:cardCornerRadius="10dp"
android:foreground="?attr/selectableItemBackground"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:cardElevation="10dp">
        <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
            <ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/icon_withdraw_id_card"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"/>
            <LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp">
                <TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="像風一樣"
android:textSize="22sp"
/>
                <TextView
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="今天有空嗎?我們一起去遊玩吧"
android:textSize="16sp"
/>

            </LinearLayout>
        </LinearLayout>
其中
android:foreground="?attr/selectableItemBackground"表示點選cardview產生類似漣漪效果
下面就很簡單了,由於依舊使用的上次的適配格式和資料,所以,只要把getview()中的佈局改成cardview佈局的名字就可以了:
convertView = mInflater.inflate(R.layout.listview_item_cardview, null);
下面就來看看執行效果吧:
是不是有一種懸浮的卡片效果,比上一次執行效果好多了,而且使用還比用shape方便。
3.其他想法:
可以通過自定義view實現
4.實現listview的item響應效果
思路:為每個item增加點選選單
實現:可以使用我們前面講的ContextView實現item長按點選跳出選單
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {//item點選設定
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        registerForContextMenu(view);//為item註冊上下文選單
}
});
關於contextview的基本用法可以參考我前面的文章:http://blog.csdn.net/s1674521/article/details/60324163
那麼讓我們看看效果吧:
點選選單項後大家可以增加對於item的操作內容,這裡我只用Toast了一下:
好了,最終效果已經實現,感覺listview + cardview + menu 的組合用法可以用在後面的專案中
5.小結:
 1).listview中的item內容可以更加豐富多彩一些,思考一下,如果涉及item實現不同頁面效果該如何做?
 2).CardView的立體卡片效果很不錯,簡單用法這邊也已經基本實現,後面可以研究一下進階方面的技巧
 3).後面繼續對listview的item中各個view進行操作和動態改變資料
補充:本文只用於記錄日常學習過程以及供大家參考借鑑,不足之處和意見希望大家提出改正,謝謝大家。