Android應用中通過Layout_weight屬性用ListView實現(xiàn)表格
今天主要說的是對Layout_weight屬性的完全解析,以及利用Layout_weight這個屬性使用ListView來實現(xiàn)表格的效果,我們都知道Android里面專門有一個TableLayout來實現(xiàn)表格的,說實話,我平常開發(fā)中用TableLayout還是比較少的,幾乎沒有用到,我們完全可以用LinearLayout和RelativeLayout來代替TableLayout的使用,自己開發(fā)中主要使用LinearLayout,RelativeLayout這兩種布局,不過剛開始我還是偏愛于RelativeLayout,因為在RelativeLayout里面我們可以直接拖拽控件來布局,比較方便,現(xiàn)在對這兩種布局偏愛各半吧,LinearLayout里面有一個屬性android:layout_weight比較重要,我們在開發(fā)中常常使用它來調節(jié)界面效果,也行很多人還不了解這個屬性的使用,不過沒關系,我首先先帶大家理解android:layout_weight屬性然后在利用它來實現(xiàn)一個表格效果
Layout_weight屬性
android:layout_weight是指LinearLayout先給里面的控件分配完大小之后剩余空間的權重,也許你暫時還是摸不到頭腦,不過沒有關系,下面我通過例子來解釋layout_weight到底是什么意思,先看下面的布局文件,一個LinearLayout,里面3個文本框
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#0045f5" android:gravity="center" android:text="1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00ff47" android:gravity="center" android:text="2" android:layout_weight="1"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff5600" android:gravity="center" android:layout_weight="1" android:text="3" /> </LinearLayout>
為什么效果是這個樣子呢,首先3個文本框的寬度都是“wrap_content”,根據(jù)視圖內部內容自動擴展,LinearLayout就先給3個TextView分配空間適當?shù)目臻g大小,假設為每個TextView分配10dip的寬度,屏幕的寬度為480dip, 那么LinearLayout的剩余空間就是 480 - 3*10 = 450dip,由于第一個TextView沒有設置layout_weight,所以它的寬度就是10dip,而后面兩個TextView設置layout_weight都是1,所以后面兩個TextView就平均分配LinearLayout的剩余空間,即為 450 / 2 = 225dip,所以后面兩個TextView的寬度為10 + 225 = 235dip
如果我們實際開發(fā)中,你設置里面控件的寬度為”wrap_content“,然后想讓里面的控件按比例占用大小,那么你就大錯特錯了,為什么呢?我們看看下面的代碼
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#0045f5" android:gravity="center" android:text="1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00ff47" android:gravity="center" android:text="2222222222222222222" android:layout_weight="1"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff5600" android:gravity="center" android:layout_weight="1" android:text="3" /> </LinearLayout>
你本來想讓后面兩個TextView平均分配剩余控件,可是下面的效果卻并不是你想要的,如下圖
其實因為3個TextView的寬度都是”wrap_content“,LinearLayout會先按照TextView里面的內容分配好大小,由于第2個TextView內容很多,所以LinearLayout為其分配更多的空間,使得剩余空間變小了,原理和上面的一樣,那么我們在實際開發(fā)中要怎么設置按比例分配呢。知道原理其實就很簡單,比如我們想要3個TextView按照1:2:3的效果
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="0dip" android:layout_height="wrap_content" android:background="#0045f5" android:gravity="center" android:layout_weight="1" android:text="1" /> <TextView android:layout_width="0dip" android:layout_height="wrap_content" android:background="#00ff47" android:gravity="center" android:text="2222222222222222222" android:layout_weight="2"/> <TextView android:layout_width="0dip" android:layout_height="wrap_content" android:background="#ff5600" android:gravity="center" android:layout_weight="3" android:text="3" /> </LinearLayout>
我們只需要將3個TextView的寬度設置為0dip,首先LinearLayout為3個TextView分配0dip的寬度,剩余空間就是 480 - 3 * 0 = 480dip,然后剩余空間在按照權重分配,所以我們看到的效果就是1:2:3
通過上面的講解,也許你會得出一個結論,權重越大,LinearLayout為其分配的空間就越大,我只能說這個結論下有點早了,我們繼續(xù)看布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#0045f5" android:gravity="center" android:layout_weight="1" android:text="1" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#00ff47" android:gravity="center" android:text="2" android:layout_weight="2"/> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff5600" android:gravity="center" android:layout_weight="2" android:text="3" /> </LinearLayout>
也許你會很納悶,怎么不是你想要的1:2:2的效果,我來為你解決疑惑吧,原理跟上面的還是一樣的,因為我們這里為每個TextView設置的寬度為”fill_parent",即為充滿整個LinearLayout,假如屏幕依然為480dip, 首先LinearLayout為3個TextView分配的寬度為480dip,屏幕剩余寬度為 480 - 3* 480 = -960dip,然后3個TextView按照權重分配剩余空間,第一個TextView分配寬度為 480 + (-960) * (1/5) = 288dip,后面兩個TextView就為480 + (-960) * (2/5) = 96dip,比例為3:1:1
通過上面的例子和分析,你是不是對Layout_weight屬性理解很透徹了呢,如果我們想要按照權重比例來分配LinearLayout,我們需要將其寬度設置為0dip,如果我們將其寬度設置為“fill_parent"的時候,其控件所占的比例不是權重的比例,我們需要自行計算比例
實現(xiàn)表格
接下來我們就通過Layout_weight用ListView來實現(xiàn)表格,我們先看Activity的布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_margin="10dip" android:layout_width="match_parent" android:layout_height="match_parent" > <include layout="@layout/list_item" android:id="@+id/table_title"/> <ListView android:id="@+id/list" android:divider="#f9b68b" android:dividerHeight="1.0dip" android:scrollbars="none" android:background="@drawable/listview_bg" android:cacheColorHint="@android:color/transparent" android:fadingEdge="none" android:layout_width="fill_parent" android:layout_height="wrap_content" > </ListView> </LinearLayout>
一個線性布局,然后就是表格的title布局,下面就是一個ListView了,很簡單的布局,接下來就是ListView每個item的布局
<?xml version="1.0" encoding="UTF-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/text_name" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="2" android:gravity="center" android:paddingBottom="10dip" android:paddingTop="10dip" android:text="姓名" /> <View android:layout_width="1.5dip" android:layout_height="fill_parent" android:background="#f9b68b"/> <TextView android:id="@+id/text_sex" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:paddingBottom="10dip" android:paddingTop="10dip" android:gravity="center" android:text="性別" /> <View android:layout_width="1.5dip" android:layout_height="fill_parent" android:background="#f9b68b"/> <TextView android:id="@+id/text_age" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:paddingBottom="10dip" android:paddingTop="10dip" android:gravity="center" android:text="年齡" /> </LinearLayout>
3個TextView的寬度都是0dip,那兩個View是中間的分割線,3個TextView的權重比值是2:1:1 ,這樣子3個TextView不會因為里面內容的長度而變形
package com.example.listviewtable; public class Person { private String name; private String sex; private int age; public Person() { super(); } public Person(String name, String sex, int age) { super(); this.name = name; this.sex = sex; this.age = age; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } }
用來存放ListView每個item數(shù)據(jù)的實體類
package com.example.listviewtable; import java.util.List; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; public class TableAdapter extends BaseAdapter { private List<Person> list; private LayoutInflater inflater; public TableAdapter(Context context, List<Person> list){ this.list = list; inflater = LayoutInflater.from(context); } @Override public int getCount() { return list.size(); } @Override public Object getItem(int position) { return list.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { Person person = (Person) this.getItem(position); ViewHolder viewHolder; if(convertView == null){ viewHolder = new ViewHolder(); convertView = inflater.inflate(R.layout.list_item, null); viewHolder.mTextName = (TextView) convertView.findViewById(R.id.text_name); viewHolder.mTextSex = (TextView) convertView.findViewById(R.id.text_sex); viewHolder.mTextAge = (TextView) convertView.findViewById(R.id.text_age); convertView.setTag(viewHolder); }else{ viewHolder = (ViewHolder) convertView.getTag(); } viewHolder.mTextName.setText(person.getName()); viewHolder.mTextSex.setText(person.getSex()); viewHolder.mTextAge.setText(person.getAge() + "歲"); return convertView; } public static class ViewHolder{ public TextView mTextName; public TextView mTextSex; public TextView mTextAge; } }
ListView的適配器類,代碼很簡單,我也沒有注釋也不去講解,相信大家都看得懂這些代碼,這就是一個基本的自己定義的適配器類,最后就是Activity界面代碼
package com.example.listviewtable; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.ViewGroup; import android.widget.ListView; public class ListTableActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //設置表格標題的背景顏色 ViewGroup tableTitle = (ViewGroup) findViewById(R.id.table_title); tableTitle.setBackgroundColor(Color.rgb(255, 100, 10)); List<Person> list = new ArrayList<Person>(); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); list.add(new Person("劉德華", "男", 50)); ListView tableListView = (ListView) findViewById(R.id.list); TableAdapter adapter = new TableAdapter(this, list); tableListView.setAdapter(adapter); } }
運行程序效果如下:
通過layout_weight這個屬性,我們就輕松實現(xiàn)了表格的功能,通過本文章相信大家對這個屬性有了深刻的理解。
- Android使用GridView實現(xiàn)表格分割線效果
- Android自定義View實現(xiàn)課程表表格
- Android自定義View實現(xiàn)仿GitHub的提交活躍表格
- Android listView 繪制表格實例詳解
- Android自定義DataGridView數(shù)據(jù)表格控件
- Android中使用ListView實現(xiàn)漂亮的表格效果
- Android提高之ListView實現(xiàn)自適應表格的方法
- Android中使用ListView繪制自定義表格技巧分享
- android表格效果之ListView隔行變色實現(xiàn)代碼
- Android自定義view繪制表格的方法
相關文章
Android使用自定義ImageView實現(xiàn)圓形圖片效果
本篇文章主要介紹了Android使用自定義ImageView實現(xiàn)圓形圖片效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05Android ContentProvider獲取手機聯(lián)系人實例
這篇文章主要介紹了Android ContentProvider獲取手機聯(lián)系人實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02android文件操作——讀取assets和raw文件下的內容
本篇文章主要介紹了android文件操作——讀取assets和raw文件下的內容,并附簡單實例代碼,需要的朋友可以參考下。2016-10-10Android教你如何發(fā)現(xiàn)APP卡頓的實現(xiàn)
這篇文章主要介紹了Android教你如何發(fā)現(xiàn)APP卡頓的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-11-11