viewpager+tab 主界面的实现

最新推荐文章于 2021-06-18 12:27:14 发布

奋斗的IT小民工

最新推荐文章于 2021-06-18 12:27:14 发布

阅读量408

点赞数

分类专栏： Android学习之入门

本文链接：https://blog.csdn.net/u013040819/article/details/54599552

版权

Android学习之入门专栏收录该内容

38 篇文章 0 订阅

订阅专栏

viewpage+底部导航栏

效果

代码

public class MainActivity extends Activity implements View.OnClickListener{
    private LinearLayout Lone,Ltwo,Lthree,Lfour;
    private FrameLayout one,two,three,four;
    private   ArrayList<View> listFragment=new ArrayList<>();
    private MyViewPagerAdapter adapter;
    private ViewPager viewPager;
    private ImageView  home,user,set,fly;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initFragment();
        adapter=new MyViewPagerAdapter(this,listFragment);
        viewPager.setAdapter(adapter);
        adapter.notifyDataSetChanged();
        slideViewPage();
    }
    private void slideViewPage() {
    // 为viewPager添加滑动触发事件，使用add（set方法过时了）
      viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
          @Override
          public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                    clearselected();
                    Selected(position);
          }
          @Override
          public void onPageSelected(int position) {
          }
          @Override
          public void onPageScrollStateChanged(int state) {
          }
      });
    }
    private void Selected(int i) {   /* 选中后的图片状态的改变的方法*/
        switch (i){
            case 0:
                home.setImageResource(R.drawable.homer);
                break;
            case 1:
                user.setImageResource(R.drawable.usering);
                break;
            case 2:
                fly.setImageResource(R.drawable.flayer);
                break;
            case 3:
                set.setImageResource(R.drawable.seted);
                break;
        }
    }
    private void initFragment() {  // 填充数据的方法
        listFragment.add(one);
        listFragment.add(two);
        listFragment.add(three);
        listFragment.add(four);
    }
    private void initView() {
        viewPager= (ViewPager) findViewById(R.id.viewpager);
        one= (FrameLayout) getLayoutInflater().inflate(R.layout.layout_01,null);
        two=(FrameLayout) getLayoutInflater().inflate(R.layout.layout_02,null);
        three=(FrameLayout) getLayoutInflater().inflate(R.layout.layout_03,null);
        four=(FrameLayout) getLayoutInflater().inflate(R.layout.layout_04,null);
        Lone= (LinearLayout) findViewById(R.id.one);
        Ltwo= (LinearLayout) findViewById(R.id.two);
        Lthree= (LinearLayout) findViewById(R.id.three);
        Lfour= (LinearLayout) findViewById(R.id.four);
        Lone.setOnClickListener(this);
        Ltwo.setOnClickListener(this);
        Lthree.setOnClickListener(this);
        Lfour.setOnClickListener(this);
        home= (ImageView) findViewById(R.id.home);
        user= (ImageView) findViewById(R.id.user);
        fly= (ImageView) findViewById(R.id.fly);
        set= (ImageView) findViewById(R.id.set);
    }
    @Override
    public void onClick(View v) {
        int i=0;
        clearselected(); // 先将选中状态取消，然后在重新设置点击的位置为选中
        switch (v.getId()){
            case R.id.one:
                i=0;
                Selected(0);
                break;
            case R.id.two:
                i=1;
                Selected(1);
                break;
            case  R.id.three:
                i=2;
                Selected(2);
                break;
            case  R.id.four:
                i=3;
                Selected(3);
                break;
        }
        viewPager.setCurrentItem(i);// 点击导航切换到相应的viewpager界面
    }
    private void clearselected() { // 将状态恢复初始状态的方法
        home.setImageResource(R.drawable.home);
        user.setImageResource(R.drawable.mine);
        fly.setImageResource(R.drawable.fly);
        set.setImageResource(R.drawable.set);
    }
}

  public class MyViewPagerAdapter extends PagerAdapter {
      private  Context context;
      private  ArrayList<View> list;
    public  MyViewPagerAdapter(Context context, ArrayList<View> list){
        this.context=context;
        this.list=list;
    }
    @Override
    public int getCount() {
        return list.size();
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      container.addView(list.get(position));
        return list.get(position) ;
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
       container.removeView(list.get(position));
    }
}

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="600dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">
        <include layout="@layout/blew_tab"></include>
    </LinearLayout>
</RelativeLayout>

blew_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:id="@+id/tab"
    android:layout_height="65dp"
    android:background="#6a5acd">
    <LinearLayout
        android:id="@+id/one"
        android:layout_width="45dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="45dp">
        <ImageView
            android:id="@+id/home"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/homer"
            android:layout_gravity="center_horizontal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="主页"
            android:layout_gravity="center_horizontal"/>
    </LinearLayout>
    <LinearLayout
    android:id="@+id/two"
    android:layout_width="45dp"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginLeft="45dp"
    android:layout_toRightOf="@id/one">
    <ImageView
        android:id="@+id/user"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/mine"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>
    <LinearLayout
        android:id="@+id/three"
        android:layout_width="45dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="45dp"
        android:layout_toRightOf="@id/two">
        <ImageView
            android:id="@+id/fly"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/fly"
            android:layout_gravity="center_horizontal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="飞机"
            android:layout_gravity="center_horizontal"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/four"
        android:layout_width="45dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="45dp"
        android:layout_toRightOf="@id/three">
        <ImageView
            android:id="@+id/set"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/set"
            android:layout_gravity="center_horizontal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户"
            android:layout_gravity="center_horizontal"/>
    </LinearLayout>
</RelativeLayout>

layout_01.xml，02.03,04,布局都相同
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="1111111111111111"/>
</FrameLayout>

奋斗的IT小民工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
viewpager+tab 主界面的实现

viewpage+底部导航栏效果代码public class MainActivity extends Activity implements View.OnClickListener{ private LinearLayout Lone,Ltwo,Lthree,Lfour; private FrameLayout one,two,three,four; private
复制链接

扫一扫