人的一生,没有一味的苦,没有永远的痛;没有迈不过的坎,没有闯不过的关。
本讲内容:ViewPager+FragmentPagerAdapter实现主界面架构(可以点击和滑动)
示例一:
下面是res/layout/top1.xml 布局文件:
[java] view plain copy <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="schemas.android./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>
[java] view plain copy <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="schemas.android./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 布局文件:
[java] view plain copy <LinearLayout xmlns:android="schemas.android./apk/res/android" xmlns:tools="schemas.android./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个标签页基本一致,不重复贴了。)
[java] view plain copy <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="schemas.android./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 文件
[java] view plain copy <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="schemas.android./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 文件
下面是 ChatMainTab01 .java界面文件 :(3个Fragment.jaca基本一致,不重复贴了。)
注意全部导入import android.support.v4.app.Fragment;而非import android.app.Fragment;以兼容底版本
[java] view plain copy 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界面文件 :
[java] view plain copy /** * 功能:主页引导栏的三个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主界面文件:
[java] view plain copy 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; } } } }
Take your time and enjoy it
更多推荐
架构,界面,ViewPager,FragmentPagerAdapter
发布评论