仿知乎日报第七篇：为菜单区加载布局以及加载数据

一.我们已经把内容区的布局讲完了，具体为这个布局加载数据后面再讲。现在我们先讲一下给菜单区（LeftFragment）加载布局，并且加载数据。因为相较内容区，菜单区的布局，加载都要简单些。

1.先看看具体的效果：

这个结构很简单，整个一个LinearLayout，上面也是一个LinearLayout，里面是一个ImageView加上一个TextView，下面就是一个ListView。所以直接看代码吧：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
 
    <LinearLayout
       android:id="@+id/ll_left_fragement_base_home"
       android:layout_width="match_parent"
       android:layout_height="60dp"
       android:gravity="center_vertical"
       android:orientation="horizontal"
       android:padding="5dp">
 
        <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="20dp"
           android:src="@drawable/home" />
 
        <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="15dp"
           android:text="首页"
           android:textColor="#3CB371"
           android:textSize="20sp"/>
    </LinearLayout>
 
    <ListView
       android:id="@+id/lv_left_fragment_list_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       //ListView选中时的背景色
       android:listSelector="#44008B00"
       //不要分割线
       android:divider="@null">
    </ListView>
 
</LinearLayout>

2.这里有个ListView，所以呢，我们当然要为它的item创建布局

效果：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="20dp"
    android:paddingBottom="20dp" >
 
    <TextView
       android:id="@+id/tv_left_fragment_list_title"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="日常心理学"
       android:textSize="18sp"
       android:layout_marginLeft="20dp"/>
 
    <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/menu_arrow"
       android:layout_alignParentRight="true"
       android:layout_marginRight="20dp"
        />
 
</RelativeLayout>

上面布局很简单，只有一个TextView，一个ImageView

二.现在我们要在代码中加载布局了

public class LeftFragment extends BaseFragment {
 
    private View         mRoot;
    private LinearLayout mLlHome;
    private ListView     mLvContent;
//  ListView的数据
    private String[]     mDatas = new String[] { "日常心理学", "用户推荐日报", "电影日报",
           "不许无聊", "设计日报", "大公司日报", "财经日报", "互联网安全", "开始游戏", "音乐日报", "动漫日报",
           "体育日报"                };
 
    @Override
    protected View initView() {
//     加载布局，以及拿到布局中的控件
       mRoot = View.inflate(mainActivity, R.layout.left_fragent_base, null);
       mLlHome = (LinearLayout) mRoot
              .findViewById(R.id.ll_left_fragement_base_home);
       mLvContent = (ListView) mRoot
              .findViewById(R.id.lv_left_fragment_list_view);
 
       return mRoot;
    }
 
    @Override
    protected void initData() {
       super.initData();
 
       MyAdapter adapter = new MyAdapter();
//     为ListView设置Adapter
       mLvContent.setAdapter(adapter);
 
    }
 
 
    private class MyAdapter extends BaseAdapter {
 
       /*
        * 返回数据的个数
        */
       @Override
       public int getCount() {
           return mDatas.length;
       }
 
       @Override
       public Object getItem(int position) {
           // TODO自动生成的方法存根
           return null;
       }
 
       @Override
       public long getItemId(int position) {
           // TODO自动生成的方法存根
           return 0;
       }
 
       @Override
       public View getView(int position, View convertView, ViewGroupparent) {
           ViewHolder viewHolder;
           if (convertView == null) {
//            1.加载ListView各个item的布局
              convertView = View.inflate(mainActivity,
                     R.layout.left_fragment_list_item, null);
              viewHolder = new ViewHolder();
//            2.拿到item布局中TextView
              viewHolder.tvTitle = (TextView) convertView
                     .findViewById(R.id.tv_left_fragment_list_title);
              convertView.setTag(viewHolder);
           } else {
              viewHolder = (ViewHolder) convertView.getTag();
           }
//         3.为TextView设置数据
           viewHolder.tvTitle.setText(mDatas[position]);
 
           return convertView;
       }
 
    }
 
    private class ViewHolder {
       TextView   tvTitle;
    }
 
}

上面虽然代码多，但是逻辑很简单：

1）将布局加载进来

2）用数据源来为ListView创建一个Adapter

2）为ListView设置Adapter