ViewPager+FragmentPagerAdapter实现微信5.2.1主界面架构
jopen
10年前
本讲内容：ViewPager+FragmentPagerAdapter实现主界面架构（可以点击和滑动）
示例一：
下面是res/layout/top1.xml 布局文件：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/top1" android:padding="10dp" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:gravity="center" android:orientation="horizontal" > <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/actionbar_icon" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:text="微信" android:textColor="@color/lightgray" android:textSize="18sp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:gravity="center" android:orientation="horizontal" > <ImageView android:layout_width="30dp" android:layout_height="30dp" android:layout_marginRight="20dp" android:src="@drawable/actionbar_search_icon" /> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:layout_marginRight="20dp" android:src="@drawable/actionbar_add_icon" /> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/actionbar_more_icon" /> </LinearLayout> </RelativeLayout> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <LinearLayout android:id="@+id/id_tab1_chat" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round" android:gravity="center" android:orientation="horizontal" android:padding="10dp" > <TextView android:id="@+id/id_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="聊天" android:textColor="@color/green" android:textSize="15dp" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab2_found" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round" android:gravity="center" android:orientation="horizontal" android:padding="10dp" > <TextView android:id="@+id/id_found" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="发现" android:textColor="@color/black" android:textSize="15dp" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab3_contact" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round" android:gravity="center" android:orientation="horizontal" android:padding="10dp" > <TextView android:id="@+id/id_contact" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="通讯录" android:textColor="@color/black" android:textSize="15dp" /> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/id_tab_line" android:layout_width="100dp" android:layout_height="wrap_content" android:background="@drawable/tabline"/> </LinearLayout>
下面是res/layout/main_layout.xml 布局文件：
<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:background="#eee" android:orientation="vertical"> <include layout="@layout/top1"/> <include layout="@layout/top2"/> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout>
下面是res/layout/chat_tab_01.xml 布局文件：(3个标签页基本一致，不重复贴了。)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="this is first tab" android:textColor="#000000" android:textSize="30sp" /> </LinearLayout>
下面是res/drawable/guide_round.xml 文件
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_enabled="true" android:drawable="@drawable/top2_tv_bg1"></item> <item android:state_enabled="false" android:drawable="@drawable/top2_tv_bg2"></item> </selector>
下面是res/values/colors.xml 文件
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color><!--白色 --> <color name="ivory">#FFFFF0</color><!--象牙色 --> <color name="lightyellow">#FFFFE0</color><!--亮黄色 --> <color name="yellow">#FFFF00</color><!--黄色 --> <color name="snow">#FFFAFA</color><!--雪白色 --> <color name="floralwhite">#FFFAF0</color><!--花白色 --> <color name="lemonchiffon">#FFFACD</color><!--柠檬绸色 --> <color name="cornsilk">#FFF8DC</color><!--米绸色 --> <color name="seashell">#FFF5EE</color><!--海贝色 --> <color name="lavenderblush">#FFF0F5</color><!--淡紫红 --> <color name="papayawhip">#FFEFD5</color><!--番木色 --> <color name="blanchedalmond">#FFEBCD</color><!--白杏色 --> <color name="mistyrose">#FFE4E1</color><!--浅玫瑰色 --> <color name="text_color">#717171</color><!--浅玫瑰色 --> <color name="bisque">#FFE4C4</color><!--桔黄色 --> <color name="moccasin">#FFE4B5</color><!--鹿皮色 --> <color name="navajowhite">#FFDEAD</color><!--纳瓦白 --> <color name="peachpuff">#FFDAB9</color><!--桃色 --> <color name="gold">#FFD700</color><!--金色 --> <color name="pink">#FFC0CB</color><!--粉红色 --> <color name="lightpink">#FFB6C1</color><!--亮粉红色 --> <color name="orange">#FFA500</color><!--橙色 --> <color name="lightsalmon">#FFA07A</color><!--亮肉色 --> <color name="darkorange">#FF8C00</color><!--暗桔黄色 --> <color name="coral">#FF7F50</color><!--珊瑚色 --> <color name="hotpink">#FF69B4</color><!--热粉红色 --> <color name="tomato">#FF6347</color><!--西红柿色 --> <color name="orangered">#FF4500</color><!--红橙色 --> <color name="deeppink">#FF1493</color><!--深粉红色 --> <color name="fuchsia">#FF00FF</color><!--紫红色 --> <color name="magenta">#FF00FF</color><!--红紫色 --> <color name="red">#FF0000</color><!--红色 --> <color name="oldlace">#FDF5E6</color><!--老花色 --> <color name="lightgoldenrodyellow">#FAFAD2</color><!--亮金黄色 --> <color name="linen">#FAF0E6</color><!--亚麻色 --> <color name="antiquewhite">#FAEBD7</color><!--古董白 --> <color name="salmon">#FA8072</color><!--鲜肉色 --> <color name="ghostwhite">#F8F8FF</color><!--幽灵白 --> <color name="mintcream">#F5FFFA</color><!--薄荷色 --> <color name="whitesmoke">#F5F5F5</color><!--烟白色 --> <color name="beige">#F5F5DC</color><!--米色 --> <color name="wheat">#F5DEB3</color><!--浅黄色 --> <color name="sandybrown">#F4A460</color><!--沙褐色 --> <color name="azure">#F0FFFF</color><!--天蓝色 --> <color name="honeydew">#F0FFF0</color><!--蜜色 --> <color name="aliceblue">#F0F8FF</color><!--艾利斯兰 --> <color name="khaki">#F0E68C</color><!--黄褐色 --> <color name="lightcoral">#F08080</color><!--亮珊瑚色 --> <color name="palegoldenrod">#EEE8AA</color><!--苍麒麟色 --> <color name="violet">#EE82EE</color><!--紫罗兰色 --> <color name="darksalmon">#E9967A</color><!--暗肉色 --> <color name="lavender">#E6E6FA</color><!--淡紫色 --> <color name="lightcyan">#E0FFFF</color><!--亮青色 --> <color name="burlywood">#DEB887</color><!--实木色 --> <color name="plum">#DDA0DD</color><!--洋李色 --> <color name="gainsboro">#DCDCDC</color><!--淡灰色 --> <color name="crimson">#DC143C</color><!--暗深红色 --> <color name="palevioletred">#DB7093</color><!--苍紫罗兰色--> <color name="goldenrod">#DAA520</color><!--金麒麟色 --> <color name="orchid">#DA70D6</color><!--淡紫色 --> <color name="thistle">#D8BFD8</color><!--蓟色 --> <color name="lightgray">#D3D3D3</color><!--亮灰色 --> <color name="lightgrey">#D3D3D3</color><!--亮灰色 --> <color name="tan">#D2B48C</color><!--茶色 --> <color name="chocolate">#D2691E</color><!--巧可力色 --> <color name="peru">#CD853F</color><!--秘鲁色 --> <color name="indianred">#CD5C5C</color><!--印第安红 --> <color name="mediumvioletred">#C71585</color><!--中紫罗兰色 --> <color name="silver">#C0C0C0</color><!--银色 --> <color name="darkkhaki">#BDB76B</color><!-- 暗黄褐色 --> <color name="rosybrown">#BC8F8F</color><!--褐玫瑰红--> <color name="mediumorchid">#BA55D3</color><!--中粉紫色 --> <color name="darkgoldenrod">#B8860B</color><!--暗金黄色 --> <color name="firebrick">#B22222</color><!--火砖色 --> <color name="powderblue">#B0E0E6</color><!--粉蓝色 --> <color name="lightsteelblue">#B0C4DE</color><!--亮钢兰色 --> <color name="paleturquoise">#AFEEEE</color><!--苍宝石绿 --> <color name="greenyellow">#ADFF2F</color><!--黄绿色 --> <color name="lightblue">#ADD8E6</color><!--亮蓝色 --> <color name="darkgray">#A9A9A9</color><!--暗灰色 --> <color name="darkgrey">#A9A9A9</color><!--暗灰色 --> <color name="brown">#A52A2A</color><!--褐色 --> <color name="sienna">#A0522D</color><!--赭色 --> <color name="darkorchid">#9932CC</color><!--暗紫色 --> <color name="palegreen">#98FB98</color><!--苍绿色 --> <color name="darkviolet">#9400D3</color><!--暗紫罗兰色 --> <color name="mediumpurple">#9370DB</color><!--中紫色 --> <color name="lightgreen">#90EE90</color><!--亮绿色 --> <color name="darkseagreen">#8FBC8F</color><!--暗海兰色 --> <color name="saddlebrown">#8B4513</color><!--重褐色 --> <color name="darkmagenta">#8B008B</color><!--暗洋红 --> <color name="darkred">#8B0000</color><!--暗红色 --> <color name="blueviolet">#8A2BE2</color><!-- 紫罗兰蓝色--> <color name="lightskyblue">#87CEFA</color><!--亮天蓝色--> <color name="skyblue">#87CEEB</color><!--天蓝色 --> <color name="gray">#808080</color><!--灰色 --> <color name="grey">#808080</color><!--灰色 --> <color name="olive">#808000</color><!--橄榄色 --> <color name="purple">#800080</color><!--紫色 --> <color name="maroon">#800000</color><!--粟色 --> <color name="aquamarine">#7FFFD4</color><!--碧绿色 --> <color name="chartreuse">#7FFF00</color><!--黄绿色 --> <color name="lawngreen">#7CFC00</color><!--草绿色 --> <color name="mediumslateblue">#7B68EE</color><!--中暗蓝色 --> <color name="lightslategray">#778899</color><!--亮蓝灰 --> <color name="lightslategrey">#778899</color><!--亮蓝灰 --> <color name="slategray">#708090</color><!--灰石色 --> <color name="slategrey">#708090</color><!--灰石色 --> <color name="olivedrab">#6B8E23</color><!--深绿褐色 --> <color name="slateblue">#6A5ACD</color><!--石蓝色 --> <color name="dimgray">#696969</color><!--暗灰色 --> <color name="dimgrey">#696969</color><!--暗灰色 --> <color name="mediumaquamarine">#66CDAA</color><!--中绿色--> <color name="cornflowerblue">#6495ED</color><!--菊兰色 --> <color name="cadetblue">#5F9EA0</color><!--军兰色 --> <color name="darkolivegreen">#556B2F</color><!-- 暗橄榄绿 --> <color name="indigo">#4B0082</color><!--靛青色 --> <color name="mediumturquoise">#48D1CC</color><!--中绿宝石--> <color name="darkslateblue">#483D8B</color><!--暗灰蓝色 --> <color name="steelblue">#4682B4</color><!--钢兰色 --> <color name="royalblue">#4169E1</color><!--皇家蓝 --> <color name="turquoise">#40E0D0</color><!--青绿色 --> <color name="mediumseagreen">#3CB371</color><!--中海蓝 --> <color name="limegreen">#32CD32</color><!--橙绿色 --> <color name="darkslategray">#2F4F4F</color><!--暗瓦灰色 --> <color name="darkslategrey">#2F4F4F</color><!--暗瓦灰色 --> <color name="seagreen">#2E8B57</color><!--海绿色 --> <color name="forestgreen">#228B22</color><!--森林绿 --> <color name="lightseagreen">#20B2AA</color><!--亮海蓝色 --> <color name="dodgerblue">#1E90FF</color><!--闪兰色 --> <color name="midnightblue">#191970</color><!--中灰兰色 --> <color name="aqua">#00FFFF</color><!--浅绿色 --> <color name="cyan">#00FFFF</color><!--青色 --> <color name="springgreen">#00FF7F</color><!--春绿色 --> <color name="lime">#00FF00</color><!--酸橙色 --> <color name="mediumspringgreen">#00FA9A</color><!--中春绿色 --> <color name="darkturquoise">#00CED1</color><!--暗宝石绿 --> <color name="deepskyblue">#00BFFF</color><!--深天蓝色 --> <color name="darkcyan">#008B8B</color><!--暗青色 --> <color name="teal">#008080</color><!--水鸭色 --> <color name="green">#008000</color><!--绿色 --> <color name="darkgreen">#006400</color><!--暗绿色 --> <color name="blue">#0000FF</color><!--蓝色 --> <color name="mediumblue">#0000CD</color><!--中兰色 --> <color name="darkblue">#00008B</color><!--暗蓝色 --> <color name="navy">#000080</color><!--海军色 --> <color name="black">#000000</color><!--黑色 --> </resources>
下面是ChatMainTab01.java界面文件：(3个Fragment.jaca基本一致，不重复贴了。)
注意全部导入import android.support.v4.app.Fragment;而非import android.app.Fragment;以兼容底版本
public class ChatMainTab01 extends Fragment{ public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) { View view = inflater.inflate(R.layout.chat_tab_01, container, false); return view; } }下面是FragmentAdapter.java界面文件：
/** * 功能：主页引导栏的三个Fragment页面设置适配器 */ public class FragmentAdapter extends FragmentPagerAdapter{ private List<Fragment> fragments; public FragmentAdapter(FragmentManager fm,List<Fragment> fragments) { super(fm); this.fragments=fragments; } public Fragment getItem(int fragment) { return fragments.get(fragment); } public int getCount() { return fragments.size(); } }下面是MainActivity.java主界面文件：
public class MainActivity extends FragmentActivity { /** * 顶部三个LinearLayout */ private LinearLayout mTabChat; private LinearLayout mTabFound; private LinearLayout mTabContact; /** * 顶部的三个TextView */ private TextView chat; private TextView found; private TextView contact; /** * Tab的那个引导线 */ private ImageView mTabLine; /** * 屏幕的宽度 */ private int screenWidth; private ViewPager mViewPager; private FragmentAdapter mAdapter; private List<Fragment> fragments = new ArrayList<Fragment>(); private Resources res; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); res=getResources(); initView(); mViewPager=(ViewPager) findViewById(R.id.id_viewpager); /** * 初始化Adapter */ mAdapter=new FragmentAdapter(getSupportFragmentManager(), fragments); mViewPager.setAdapter(mAdapter); mViewPager.setOnPageChangeListener(new TabOnPageChangeListener()); initTabLine(); } /** * 根据屏幕的宽度，初始化引导线的宽度 */ private void initTabLine() { mTabLine=(ImageView) findViewById(R.id.id_tab_line); //获取屏幕的宽度 DisplayMetrics outMetrics=new DisplayMetrics(); getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics); screenWidth=outMetrics.widthPixels; //获取控件的LayoutParams参数(注意：一定要用父控件的LayoutParams写LinearLayout.LayoutParams) LinearLayout.LayoutParams lp=(android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams(); lp.width=screenWidth/3;//设置该控件的layoutParams参数 mTabLine.setLayoutParams(lp);//将修改好的layoutParams设置为该控件的layoutParams } /** * 初始化控件，初始化Fragment */ private void initView() { chat=(TextView) findViewById(R.id.id_chat); found=(TextView) findViewById(R.id.id_found); contact=(TextView) findViewById(R.id.id_contact); chat.setOnClickListener(new TabOnClickListener(0)); found.setOnClickListener(new TabOnClickListener(1)); contact.setOnClickListener(new TabOnClickListener(2)); fragments.add(new ChatMainTab01()); fragments.add(new FoundMainTab02()); fragments.add(new ContactMainTab03()); mTabChat=(LinearLayout) findViewById(R.id.id_tab1_chat); mTabFound=(LinearLayout) findViewById(R.id.id_tab2_found); mTabContact=(LinearLayout) findViewById(R.id.id_tab3_contact); } /** * 重置颜色 */ private void resetTextView() { chat.setTextColor(res.getColor(R.color.black)); found.setTextColor(res.getColor(R.color.black)); contact.setTextColor(res.getColor(R.color.black)); } /** * 功能：点击主页TAB事件 */ public class TabOnClickListener implements View.OnClickListener{ private int index=0; public TabOnClickListener(int i){ index=i; } public void onClick(View v) { mViewPager.setCurrentItem(index);//选择某一页 } } /** * 功能：Fragment页面改变事件 */ public class TabOnPageChangeListener implements OnPageChangeListener{ //当滑动状态改变时调用 public void onPageScrollStateChanged(int state) { } //当前页面被滑动时调用 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels){ LinearLayout.LayoutParams lp=(android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams(); //返回组件距离左侧组件的距离 lp.leftMargin= (int) ((positionOffset+position)*screenWidth/3); mTabLine.setLayoutParams(lp); } //当新的页面被选中时调用 public void onPageSelected(int position) { //重置所有TextView的字体颜色 resetTextView(); switch (position) { case 0: chat.setTextColor(res.getColor(R.color.green)); break; case 1: found.setTextColor(res.getColor(R.color.green)); break; case 2: contact.setTextColor(res.getColor(R.color.green)); break; } } } }来自：http://blog.csdn.net/liguojin1230/article/details/45568185