ViewPager实现微信界面

效果图：

 

一.实现三个布局：

  1.top.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="#464646" android:gravity="center" android:layout_height="55dp"> <TextView android:gravity="center" android:text="微信" android:textSize="20sp" android:textColor="#ffffff" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>

  2.bottom.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android :layout_width= "match_parent" android :orientation= "horizontal" //横向布局 android :background= "#ffffff" android :layout_height= "65dp" > <LinearLayout android :id= "@+id/tab_weixin" android :layout_width= "0dp" //对宽度方向平分最好宽度设置为0 android :orientation= "vertical"

android:layout_weight="1"  

（这里设置weight=1即对于总布局宽度方向剩余部分对后面的布局分享）

android :gravity= "center" android :layout_height= "match_parent" > <ImageButton android :clickable= "false" android :id= "@+id/tab_weixin_img" android :layout_height= "wrap_content" android :layout_width= "wrap_content" android :src= "@drawable/weixin_anse" android :background= "#0000" <!--设置为透明--> /> <TextView android :text= "微信" android :textColor= "#000000" android :layout_width= "wrap_content" android :layout_height= "wrap_content" /> </LinearLayout> <LinearLayout android :id= "@+id/tab_friend" android :layout_width= "0dp" android :orientation= "vertical" android :layout_weight= "1" android :gravity= "center" android :layout_height= "match_parent" > <!--当点击图片按钮没有作用时可设置： android:clickable="false" 图片不可点击即让LinearLayout 去实现点击事件--> <ImageButton android :clickable= "false" android :id= "@+id/tab_friend_img" android :layout_height= "wrap_content" android :layout_width= "wrap_content" android :src= "@drawable/friend_anse" android :background= "#00000000" /> <!--android:background="#00000000" 设置为透明 和四个0效果一样--> <TextView android :text= "朋友" android :textColor= "#000000" android :layout_width= "wrap_content" android :layout_height= "wrap_content" />

</LinearLayout>

<LinearLayout>

<ImageButton ..../>

<textView ..../>

</LinearLayout>

......

</LinearLayout>

  3.MainActivity.xml  (LinearLayout布局)

<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="vertical">

<include layout="@layout/top"/><android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="0dp">

</android.support.v4.view.ViewPager>

</LinearLayout>

二.代码实现

private ViewPager mViewPager;private PagerAdapter mAdapter;

private List<View> mViews=new ArrayList<View>();

//获取四个布局：

private LinearLayout mtabweixin;private LinearLayout mtabaddress;private LinearLayout mtabfriend;

private LinearLayout mtabsetting;

//获取四个InageButton

private ImageButton mWeixinimg;private ImageButton mFriendimg;

private ImageButton mAddressimg;

private ImageButton msettingimg;

protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//无android默认标题栏 //getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); //设置界面无系统标题栏即全屏显示但是android自带标题栏还在 需要在setContentView之前 setContentView(R.layout.activity_main); initView(); //初始化用的函数 initEvents(); //}

private void initView() {mViewPager= (ViewPager) findViewById(R.id.view_pager); mtabfriend= (LinearLayout) findViewById(R.id.tab_friend); mtabaddress= (LinearLayout) findViewById(R.id.tab_address); mtabsetting= (LinearLayout) findViewById(R.id.tab_setting); mtabweixin= (LinearLayout) findViewById(R.id.tab_weixin);

mWeixinimg= (ImageButton) findViewById(R.id.tab_weixin_img);

msettingimg= (ImageButton) findViewById(R.id.tab_setting_img);

mAddressimg= (ImageButton) findViewById(R.id.tab_address_img);

mFriendimg= (ImageButton) findViewById(R.id. tab_friend_img) ; LayoutInflater mInflater=LayoutInflater. from( this) ; //获得tab界面 View tab01=mInflater.inflate(R.layout. tab01 ,null) ; View tab02=mInflater.inflate(R.layout. tab02 ,null) ; View tab03=mInflater.inflate(R.layout. tab03 ,null) ; View tab04=mInflater.inflate(R.layout. tab04 ,null) ; mViews.add(tab01) ; //tab01.xml是需事先准备好对于四个界面的显示界面布局

mViews.add(tab02); //效果图中的这四个布局都只实现了<TextView>

mViews.add(tab03);

mViews.add(tab04) ; //装tab到List<View>中 // mViewPager.setAdapter(mAdapter); mAdapter= new PagerAdapter() { //初始化mAdapter @Override public void destroyItem(ViewGroup container , int position , Object object) { container.removeView( mViews.get(position)) ; //摧毁 } @Override public Object instantiateItem(ViewGroup container , int position) { //初始化Item View view= mViews.get(position) ; //获得View container.addView(view) ; return view ; } @Override public int getCount() { return mViews.size() ; //View包含的个数 } @Override public boolean isViewFromObject(View view , Object object) { return view==object ; //检查是否来自同一个对象 } } ; mViewPager.setAdapter( mAdapter) ; //设置ViewPager } //initView()结束

//imageButton的点击事件 @Override public void onClick(View view) { resetImg(); switch (view.getId()){case R.id.tab_weixin_img: {mViewPager.setCurrentItem(0); mWeixinimg.setImageResource(R.drawable.weixin_lang); //设置回亮色 break; }case R.id.tab_friend_img: {mViewPager.setCurrentItem(1); mFriendimg.setImageResource(R.drawable.friend_liang); break; }case R.id.tab_address_img: {mViewPager.setCurrentItem(2); mAddressimg.setImageResource(R.drawable.zhibo_liang); break; }case R.id.tab_setting_img: {mViewPager.setCurrentItem(3); msettingimg.setImageResource(R.drawable.shezhi_liang); break; } } }

//将所有图片切换为暗色private void resetImg() {mWeixinimg.setImageResource(R.drawable.weixin_anse);//这里是切换成别的暗色图片， mFriendimg.setImageResource(R.drawable.friend_anse); mAddressimg.setImageResource(R.drawable.zhibo_anse); msettingimg.setImageResource(R.drawable.shezhi_anse);}

三.只需要将代码中需要的六张图片放入drawable中就行

相关资源：python入门教程(PDF版)