安卓左右滑动框架——纯手写，不用依赖别人的框架啦

一粒程序米 2020-11-03 16:45:55

分类专栏：安卓基础

本文链接：https://blog.csdn.net/weixin_43449246/article/details/109472242

版权

1.先来看看效果吧！

在这里插入图片描述

2.实现方法：

（1）首先新建一个空Activity，设为主activity。HomeActivity.java

public class HomeActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener{
    // 底部菜单5个Linearlayout
    private LinearLayout ll_home;
    private LinearLayout ll_address;
    private LinearLayout ll_friend;
    private LinearLayout ll_setting;
    private LinearLayout ll_set;
    // 底部菜单5个菜单标题
    private TextView tv_home;
    private TextView tv_address;
    private TextView tv_friend;
    private TextView tv_setting;
    private TextView tv_set;

    // 中间内容区域
    private ViewPager viewPager;

    // ViewPager适配器ContentAdapter
    private ContentAdapter adapter;

    private List<View> views;
    private void initEvent() {
        // 设置按钮监听
        ll_home.setOnClickListener(this);
        ll_address.setOnClickListener(this);
        ll_friend.setOnClickListener(this);
        ll_setting.setOnClickListener(this);
        ll_set.setOnClickListener(this);

        //设置ViewPager滑动监听
        viewPager.setOnPageChangeListener(this);

    }


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);


        // 底部菜单5个Linearlayout
        this.ll_home = findViewById(R.id.ll_home);
        this.ll_address = findViewById(R.id.ll_address);
        this.ll_friend = findViewById(R.id.ll_friend);
        this.ll_setting = findViewById(R.id.ll_setting);
        this.ll_set= findViewById(R.id.ll_set);


        // 底部菜单5个菜单标题
        this.tv_home = findViewById(R.id.tv_home);
        this.tv_address = findViewById(R.id.tv_address);
        this.tv_friend = findViewById(R.id.tv_friend);
        this.tv_setting = findViewById(R.id.tv_setting);
        this.tv_set= findViewById(R.id.tv_set);
        // 中间内容区域ViewPager
        this.viewPager = findViewById(R.id.vp_content);

        // 适配器
        View page_01 = View.inflate(HomeActivity.this, R.layout.page_01, null);
        View page_02 = View.inflate(HomeActivity.this, R.layout.page_02, null);
        View page_03 = View.inflate(HomeActivity.this, R.layout.page_03, null);
        View page_04 = View.inflate(HomeActivity.this, R.layout.page_04, null);
        View page_05 = View.inflate(HomeActivity.this, R.layout.page_05, null);

        views = new ArrayList<>();
        views.add(page_01);
        views.add(page_02);
        views.add(page_03);
        views.add(page_04);
        views.add(page_05);

        this.adapter = new ContentAdapter(views);
        viewPager.setAdapter(adapter);
        initEvent();

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.ll_home:
                tv_home.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(0);

                break;
            case R.id.ll_address:
                tv_address.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(1);
                break;
            case R.id.ll_friend:
                tv_friend.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(2);
                break;
            case R.id.ll_setting:
                tv_setting.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(3);
                break;
            case  R.id.ll_set:
                tv_set.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(4);

            default:
                break;
        }
    }
    private void restartBotton() {

        // TextView置为白色
        tv_home.setTextColor(0xffffffff);
        tv_address.setTextColor(0xffffffff);
        tv_friend.setTextColor(0xffffffff);
        tv_setting.setTextColor(0xffffffff);
        tv_set.setTextColor(0xffffffff);
    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        restartBotton();
        //当前view被选择的时候,改变底部菜单图片，文字颜色
        switch (position) {
            case 0:
                tv_home.setTextColor(0xff1B940A);
                break;
            case 1:
                tv_address.setTextColor(0xff1B940A);
                break;
            case 2:
                tv_friend.setTextColor(0xff1B940A);

                break;
            case 3:
                tv_setting.setTextColor(0xff1B940A);
                break;
            case 4:
                tv_set.setTextColor(0xff1B940A);

                break;
            default:
                break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

有报红的先不用理它。

（2）activity_home.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.myclient.HomeActivity">

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/vp_content"
            android:layout_width="match_parent"
            android:background="#ffffff"
            android:layout_height="0dp"
            android:layout_weight="1" >
        </androidx.viewpager.widget.ViewPager>

        <include layout="@layout/activity_bottom" />

    </LinearLayout>

</RelativeLayout>

（3）activity_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<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="35dp"
    android:background="#CBB4F5" >

    <LinearLayout
        android:id="@+id/ll_home"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/iv_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <TextView
            android:id="@+id/tv_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="页面1"
            android:textSize="20dp"
            android:textColor="#1B940A"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/iv_address"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <TextView
            android:id="@+id/tv_address"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="页面2"
            android:textColor="#ffffff"
            android:textSize="20dp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_friend"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/iv_friend"
            android:layout_width="53dp"
            android:layout_height="match_parent"
            />

        <TextView
            android:id="@+id/tv_friend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="页面3"
            android:textSize="20dp"
            android:textColor="#ffffff"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/iv_setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <TextView
            android:id="@+id/tv_setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="页面4"
            android:textColor="#ffffff"
            android:textSize="20dp"
            android:textStyle="bold" />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_set"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/iv_set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <TextView
            android:id="@+id/tv_set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="页面5"
            android:textColor="#ffffff"
            android:textSize="20dp"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

(4)回到HomeActivity.java,会看到ContentAdapter报红，这里新建一个ContentAdapter.java类

public class ContentAdapter extends PagerAdapter {

    private List<View> views;

    public ContentAdapter(List<View> views) {
        this.views = views;
    }

    @Override
    public int getCount() {
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = views.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

}

（5）page_01~05的报红，新建5个Layout resource file（xml）,分别命名为page_01.xml、page_02.xml…以此类推
page_01.xml的内容和其他的有点点不同，因为嵌入fragment会让APP更灵活方便。
以下是page_01.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--下面是fragment-->
    <fragment
        android:id="@+id/test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:name="com.example.myclient.TestFragment"
    />

</LinearLayout>

TestFragment报红了是不是？
新建一个TestFragment.java，包名先不用管。

public class TestFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub

        View view = inflater.inflate(R.layout.fragment_test, null);

        Button btn_test=view.findViewById(R.id.btn_test);
        btn_test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(),"我是第一页",Toast.LENGTH_LONG).show();
            }
        });
        return view;
    }
}

fragment_test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点我试试"/>
</LinearLayout>

到这一步，如果page_01.xml里的 android:name="com.example.myclient.TestFragment"还报红，就把com.example.myclient.TestFragmen删掉，然后你试试手打com. 它就会自己出来TestFragment的选项，这时候点击这个选项就可以啦

page_02.xml的和另外三个是一样的，除了展现的文字不一样。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第二页"/>
</LinearLayout>

manifest也给吧

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.myclient">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="AllowBackup,GoogleAppIndexingWarning">
        <activity android:name=".HomeActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>