二探ListView

使用draw9patch

  1. 打开内置terminal
  2. 输入CD C:\Users\Gaby\AppData\Local\Android\sdk
  3. 在该目录下输入draw9patch
  4. 导入图片，开始绘制
  5. 本文成果图:

成果图成果图

  1. 左边和上边绘制的黑线，表示在纵向和横向拉伸时拉伸的部分。右边和下边的黑线表示要用于显示内容的部分
  2. 从图片上可以看出，右边和下边的黑线可以偏中间一点

上代码

首先写MainActivity,先只考虑需要哪些功能，不去管如何实现

1
2
3
4
5
6
7
8
9
 
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//首先写活动主布局文件
        ListView listV = (ListView) findViewById(R.id.listView);
        initData(); //接着写类和initData函数
        //单项布局文件，然后写adapter类
        mess_adapter adapter = new mess_adapter(MainActivity.this,R.layout.item_layout,mesgLists);
        listV.setAdapter(adapter);
    }

 

顺序是：MainActivity->活动布局文件->Item类->Item类对象的集合->初始化该集合->item_layout单项布局->adapter类

活动布局文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<LinearLayout
	android:orientation="vertical"/> 
    android:background="#d8e0e8">

   <ListView
       android:id="@+id/listView"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:divider="#0000" 
       android:layout_weight="1"
       >
   </ListView>

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
      <EditText
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:hint="input your message"/>
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Send"/>
   </LinearLayout>
</LinearLayout>

注意:

  • android:divider="#0000"该项用于设置ListView的的分割线为透明
  • 输入框和button通过LinearLaout绑定在一起
  • 最外LinearLayout的orientation设置为vertical是让ListView和内LinearLayout上下放置
  • ListView设置height = "0dp" weight = "1"切内LinearLayout无设置，意思就是，在保证内LinearLayout的区域大小后，其他空间都归ListView，同理内LinearLayout的EditText和Button

Item类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
public class Item {
    public static final int SEND = 1;
    public static final int REC = 0;
    private int type;
    private String content;

    public Item(int wtype, String content){
        this.type = wtype;
        this.content = content;
    }

    public int getType() {
        return type;
    }

    public String getContent() {
        return content;
    }
}

注意：

  • 如果要在MainActivity中使用SEND来给一个Item对象赋值，那么这个SEND常量就一定得在Item类中定义

Item类对象的集合->初始化该集合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
private List<Item> mesgs = new ArrayList<Item>();

 private void initData() {
        Item con_a = new Item(Item.REC,"hello my name is Gaby");
        mesgLists.add(con_a);
        Item con_b = new Item(Item.SEND,"Hi,Gaby! I'm Cici");
        mesgLists.add(con_b);
        Item con_c = new Item(Item.SEND,"where are you come from?");
        mesgLists.add(con_c);
        Item con_d = new Item(Item.REC,"I'm from China");
        mesgLists.add(con_d);

        Item con_e = new Item(Item.SEND,"oh? I come from Japan");
        mesgLists.add(con_d);

        Item con_f = new Item(Item.REC,"so you must know yui hatano");
        mesgLists.add(con_f);

        Item con_g = new Item(Item.SEND,"I do,she is the best");
        mesgLists.add(con_g);
    }

item_layout单项布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/qq"
        android:layout_gravity="left">
        <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/oo">
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

注意:

  • android:orientation="vertical"以及两个LinearLayout中各自的android:layout_gravity="left"android:layout_gravity="right"
    使得单项布局中的两个对话框一左一右垂直排列
    item_layout
  • 实际上对话框中带有TextView,因为LinearLayout中的两个属性都是wrap_content

adapter类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
public class mess_adapter extends ArrayAdapter<Item>{

    private int resourceId;

    public mess_adapter(Context context,int textViewResourceId, List<Item> objects) {
        super(context,textViewResourceId, objects);
           resourceId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view;
        ViewHolder viewHolder;
        Item item = getItem(position);
        if(convertView == null){
            viewHolder = new ViewHolder();
            view = LayoutInflater.from(getContext()).inflate(resourceId,null);
            viewHolder.left_layout = (LinearLayout) view.findViewById(R.id.left);
            viewHolder.right_layout = (LinearLayout) view.findViewById(R.id.right);
            viewHolder.tv_right = (TextView) view.findViewById(R.id.tv_right);
            viewHolder.tv_left = (TextView) view.findViewById(R.id.tv_left);
            view.setTag(viewHolder);
        } else{
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();
        }
        if(item.getType() == Item.SEND){//send is in the left
            viewHolder.right_layout.setVisibility(View.GONE);
            viewHolder.tv_left.setText(item.getContent());
        } else{
            viewHolder.left_layout.setVisibility(View.GONE);
            viewHolder.tv_right.setText(item.getContent());
        }
        return view;
    }

    class ViewHolder{
        LinearLayout left_layout;
        LinearLayout right_layout;
        TextView tv_left;
        TextView tv_right;
    }
}

 

注意：

  • 因为不能通过一个布局去取得布局中的控件，也因此，每个控件都设置id
  • viewHolder存放着四个控件实例
posted @ 2016-03-20 22:01  Gabyler  阅读(186)  评论(0)  编辑  收藏  举报