使用ViewPage+Fragment仿微信界面

2019-10-22 18:12:56

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了ViewPage+Fragment仿微信界面的具體代碼，供大家參考，具體內容如下

實現效果：

左右滑動可切換界面，點擊也可以實現

ViewPage,Fragment,微信界面

界面與碎片：

主界面：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://schemas.android.com/apk/res-auto"  xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical"  tools:context="com.example.g160628_android10_viewpagerfragment_zuoye.MainActivity">  <!--設置ViewPager與單選組-->  <android.support.v4.view.ViewPager   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:id="@+id/vp_main_view"   android:layout_weight="1"   ></android.support.v4.view.ViewPager>  <RadioGroup   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:orientation="horizontal"   android:id="@+id/rg_main_group"   >   <RadioButton    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_weight="1"    android:button="@null"    android:background="@drawable/button_selector"    android:id="@+id/rb_main_bu1"    />   <RadioButton    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_weight="1"    android:button="@null"    android:background="@drawable/button2_selector"    android:id="@+id/rb_main_bu2"    />   <RadioButton    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_weight="1"    android:button="@null"    android:background="@drawable/button3_selector"    android:id="@+id/rb_main_bu3"    />   <RadioButton    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_weight="1"    android:button="@null"    android:background="@drawable/button4_selector"    android:id="@+id/rb_main_bu4"    />  </RadioGroup>  </LinearLayout>

在drawable中創建四個選擇器

button_selector.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_checked="false" android:drawable="@drawable/small_weixin"></item>  <item android:state_checked="true" android:drawable="@drawable/small_weixin2"></item> </selector>

button2_selector.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_checked="false" android:drawable="@drawable/small_contact"></item>  <item android:state_checked="true" android:drawable="@drawable/small_contact2"></item> </selector>

button3_selector.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_checked="false" android:drawable="@drawable/small_find"></item>  <item android:state_checked="true" android:drawable="@drawable/small_find2"></item> </selector>

button4_selector.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_checked="false" android:drawable="@drawable/small_mine"></item>  <item android:state_checked="true" android:drawable="@drawable/small_mine2"></item> </selector>

四個碎片：

fragment_weixin.xml

<?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">  <ImageView   android:layout_width="470dp"   android:layout_height="720dp"   android:src="@drawable/weixin"   /> </LinearLayout>

fragment_contact.xml

<?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">  <ImageView   android:layout_width="470dp"   android:layout_height="720dp"   android:src="@drawable/contact"   /> </LinearLayout>

fragment_find.xml

<?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">  <ImageView   android:layout_width="470dp"   android:layout_height="720dp"   android:src="@drawable/find"   /> </LinearLayout>

fragment_mine.xml

<?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">  <ImageView   android:layout_width="470dp"   android:layout_height="720dp"   android:src="@drawable/mine"   /> </LinearLayout>

Java代碼

主Activity：

package com.example.g160628_android10_viewpagerfragment_zuoye;  import android.content.res.Resources; import android.support.annotation.IdRes; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.RadioButton; import android.widget.RadioGroup;  import java.util.ArrayList; import java.util.List;  public class MainActivity extends AppCompatActivity {  private List<Fragment> fragments=new ArrayList<>();  private ViewPager vp_main_view;  private RadioGroup rg_main_group;  private List<View> views;    @Override  protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentView(R.layout.activity_main);   //把碎片加入到碎片集合中   fragments.add(new WeiXinFragment());   fragments.add(new ContactFragment());   fragments.add(new FindFragment());   fragments.add(new MineFragment());    //找到自己的ViewPager   vp_main_view = (ViewPager) findViewById(R.id.vp_main_view);   vp_main_view.setAdapter(new MyAdapter(getSupportFragmentManager()));   //設置當前的碎片為1   vp_main_view.setCurrentItem(1);    //獲得單選按鈕組   rg_main_group = (RadioGroup) findViewById(R.id.rg_main_group);   //設置單選按鈕組的選擇事件   rg_main_group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {    @Override    public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {     Resources res=MainActivity.this.getResources();     switch (checkedId) {      case R.id.rb_main_bu1:       vp_main_view.setCurrentItem(0);       break;      case R.id.rb_main_bu2:       vp_main_view.setCurrentItem(1);       break;      case R.id.rb_main_bu3:       vp_main_view.setCurrentItem(2);       break;      case R.id.rb_main_bu4:       vp_main_view.setCurrentItem(3);       break;     }    }   });    //獲得所有的單選框   views=rg_main_group.getTouchables();     //設置單選框事件   vp_main_view.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {     }     @Override    public void onPageSelected(int position) {     //設置選中     RadioButton button= (RadioButton) views.get(position);     button.setChecked(true);    }     @Override    public void onPageScrollStateChanged(int state) {     }   });    }   //定義屬于自己的適配器  class MyAdapter extends FragmentPagerAdapter{    public MyAdapter(FragmentManager fm) {    super(fm);   }    //獲得碎片的所有   @Override   public Fragment getItem(int position) {    return fragments.get(position);   }    //返回碎片的長度   @Override   public int getCount() {    return fragments.size();   }  }  }

四個碎片對應的Fragment

WeiXinFragment

package com.example.g160628_android10_viewpagerfragment_zuoye;  import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  /**  * Created by Administrator on 2017/6/15.  */  public class WeiXinFragment extends Fragment {  @Nullable  @Override  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {   //返回對應的fragment_weixin   return inflater.inflate(R.layout.fragment_weixin,null);  } }

ContactFragment

package com.example.g160628_android10_viewpagerfragment_zuoye;  import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  /**  * Created by Administrator on 2017/6/15.  */  public class ContactFragment extends Fragment {  @Nullable  @Override  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {   //返回對應的fragment_contact   return inflater.inflate(R.layout.fragment_contact,null);  } }

FindFragment

package com.example.g160628_android10_viewpagerfragment_zuoye;  import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  /**  * Created by Administrator on 2017/6/15.  */  public class FindFragment extends Fragment {  @Nullable  @Override  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {   //返回對應的fragment_find   return inflater.inflate(R.layout.fragment_find,null);  } }

MineFragment

package com.example.g160628_android10_viewpagerfragment_zuoye;  import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  /**  * Created by Administrator on 2017/6/15.  */  public class MineFragment extends Fragment {  @Nullable  @Override  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {   //返回對應的fragment_mine   return inflater.inflate(R.layout.fragment_mine,null);  } }

需要的圖片

small_weixin small_contact small_find small_mine

ViewPage,Fragment,微信界面