Android studio开发app实现仿微信滑动切换界面

最新推荐文章于 2024-05-05 15:12:36 发布

Ｒｕｎ

最新推荐文章于 2024-05-05 15:12:36 发布

阅读量3.3k

点赞数 9

文章标签： android app 安卓 xml java

本文链接：https://blog.csdn.net/weixin_43230707/article/details/116998266

版权

Android studio开发app实现仿微信滑动切换界面

为了使app具有良好的界面显示效果，使界面更见高逼格，可通过滑动屏幕或点击Button切换界面。
效果如下所示：
效果展示

在这里插入图片描述
操作步骤

实现该目标，需进行如下步操作
step1：首先新建一个的.java文件，为主activity，本设计中以Main.java为例，代码如下：

public class Main extends AppCompatActivity implements View.OnClickListener{
    private TextView title,item_favourite,item_query,item_mine;
    private ViewPager vp;
    private Favourite favourite;//调用推荐界面
    private Query query;//调用查询界面
    private Mine mine;//调用我界面
    private List<Fragment> mFragmentList=new ArrayList<Fragment>();
    private FragmentAdapter mFragmentAdapter;

    String[] titles= new String[]{"推荐","查询","我"};//设置标题内容，本设计有三个界面，分别是推荐、查询、我
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initViews();
        mFragmentAdapter=new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList) ;
        vp.setOffscreenPageLimit(3);//有几个界面就写几个
        vp.setAdapter(mFragmentAdapter);
        vp.setCurrentItem(0);
        item_favourite.setTextColor(Color.parseColor("#66CDAA"));//设置标题颜色
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener(){
            @Override
            public void onPageScrolled(int position,float positionOffset,int positionOffsetPixels){
            }
            @Override
            public void onPageSelected(int position){
                title.setText(titles[position]);
                changeTextColor(position);
            }
            @Override
            public void onPageScrollStateChanged(int state){
            }
        });

    }
    private void initViews() {
        title = (TextView) findViewById(R.id.title);//标题文本
        item_favourite=(TextView)findViewById(R.id.item_favourite);//推荐 文本
        item_query = (TextView) findViewById(R.id.item_query);//查询 文本
        item_mine = (TextView) findViewById(R.id.item_mine);//我 文本
        item_favourite.setOnClickListener(this);
        item_query.setOnClickListener(this);
        item_mine.setOnClickListener(this);
        vp = (ViewPager) findViewById(R.id.mainViewPager);
        favourite = new Favourite();
        query= new Query();
        mine=new Mine();
        //给FragmentList添加数据
        mFragmentList.add(favourite);
        mFragmentList.add(query);
        mFragmentList.add(mine);
    }
    //点击底部Text动态修改ViewPager内容
    @Override
    public void onClick(View v){
        switch (v.getId()){
            case R.id.item_favourite:
                vp.setCurrentItem(0,true);
                break;
            case R.id.item_query:
                vp.setCurrentItem(1,true);
                break;
            case R.id.item_mine:
                vp.setCurrentItem(2,true);
                break;
        }
    }
    public class FragmentAdapter extends FragmentPagerAdapter{
        List<Fragment> fragmentList=new ArrayList<Fragment>();
        public FragmentAdapter(FragmentManager fm, List<Fragment> fragmentList){
            super(fm);
            this.fragmentList=fragmentList;
        }
        @Override
        public Fragment getItem(int position){
            return fragmentList.get(position);
        }
        @Override
        public int getCount(){
            return fragmentList.size();
        }
    }
    //修改底部导航颜色
    private void changeTextColor(int position){
        if (position==0){
            item_favourite.setTextColor(Color.parseColor("#66CDAB"));
            item_query.setTextColor(Color.parseColor("#ff000000"));
            item_mine.setTextColor(Color.parseColor("#ff000000"));
        }else if (position==1){
            item_favourite.setTextColor(Color.parseColor("#ff000000"));
            item_query.setTextColor(Color.parseColor("#66CDAB"));
            item_mine.setTextColor(Color.parseColor("#ff000000"));
        }
        else if (position==2){
            item_favourite.setTextColor(Color.parseColor("#ff000000"));
            item_query.setTextColor(Color.parseColor("#ff000000"));
            item_mine.setTextColor(Color.parseColor("#66CDAB"));
        }
    }
}

step2：接下来新建一个main.xml，用于在Main.java中显示
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<!--顶部导航设置-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/holo_green_dark">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="推荐"
            android:id="@+id/title"
            android:layout_centerInParent="true"
            android:textColor="@android:color/white"
            android:textSize="20sp"/>
    </RelativeLayout>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/mainViewPager"/>
<!--底部导航栏设置-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="1dp"
        android:background="@android:color/white"
        android:baselineAligned="false"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:paddingBottom="5dp"
        android:paddingTop="5dp">
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:id="@+id/item_favourite"
            android:layout_weight="1"
            android:layout_gravity="center_horizontal"
            android:text="推荐"
            android:textColor="@android:color/black"
            android:textSize="18dp" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:id="@+id/item_query"
            android:layout_gravity="center_horizontal"
            android:text="查询"
            android:layout_weight="1"
            android:textColor="@android:color/black"
            android:textSize="18dp" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:id="@+id/item_mine"
            android:layout_gravity="center_horizontal"
            android:text="我"
            android:textColor="@android:color/black"
            android:layout_weight="1"
            android:textSize="18dp" />
    </LinearLayout>
</LinearLayout>

step3：新建三个.xml文件，分别命名为favourite.xml、query.xml、mine.xml。
favourite.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="255dp"
        android:src="@drawable/study"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/bt1"
        android:text="三国演义                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:onClick="startCallPhone"
        android:id="@+id/bt2"
        android:layout_marginLeft="20dp"
        android:text="红楼梦                                                                          >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/bt3"
        android:text="西游记                                                                          >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/bt4"
        android:text="水浒传                                                                          >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/bt5"
        android:text="繁星春水                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/bt6"
        android:text="朝花夕拾                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/bt7"
        android:text="骆驼祥子                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
</LinearLayout>

query.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="60dp"
        android:layout_marginRight="20dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="图书名称"
            android:textColor="@android:color/black"
            android:textSize="20dp"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/user_et_name"
            android:hint="请输入图书名称"
            android:textSize="20dp"/>
    </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/user_query"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:textSize="15dp"
        android:background="@drawable/btn_normal"
        android:scrollbars="vertical"
        android:maxLines="100"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/user_bt_query"
            android:text="查询"
            android:textSize="15dp"
            android:layout_weight="1"
            android:background="@drawable/btn_shape1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/user_bt_clear"
            android:text="清除查询"
            android:layout_marginLeft="10dp"
            android:background="@drawable/btn_shape"
            android:layout_weight="1"/>
    </LinearLayout>
</LinearLayout>

mine.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginRight="20dp"
    android:layout_marginLeft="20dp">
    <ImageView
        android:layout_width="127dp"
        android:layout_marginTop="20dp"
        android:layout_height="136dp"
        android:src="@drawable/use"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="图书管理系统\n   Version 1.0"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"/>
    <View
        android:layout_width="match_parent"
        android:layout_marginTop="30dp"
        android:layout_height="0.1sp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/about"
        android:text="关于软件                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:onClick="startCallPhone"
        android:id="@+id/call"
        android:layout_marginLeft="20dp"
        android:text="联系我们                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/use"
        android:text="使用说明                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/new_v"
        android:text="更新版本                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:id="@+id/finish"
        android:text="退出登录                                                                      >"
        android:background="#00000000"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/black"/>
</LinearLayout>

step4：新建三个.java文件，分别命名为Favourite、Query、Mine。
Favourite代码如下：

public class Favourite  extends Fragment {
    private Context context;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view1 = inflater.inflate(R.layout.favourite, container, false);
        return view1;
    }
}

Query代码如下：

public class Query  extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view2 = inflater.inflate(R.layout.query, container, false);
        return view2;
    }
}

Mine代码如下：

public class Mine  extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view3 = inflater.inflate(R.layout.mine, container, false);
        return view3;
    }
}

step5：在Manifest中设置权限，添加如下代码

<activity android:name=".Main"></activity>

到此位置，滑动屏幕或点击底部导航栏按钮切换界面功能已全部实现。

提示，在fragment中，button的监听事件及toast功能需进行如下设置：
1.button事件监听
在这里插入图片描述

2. Toast功能

资源
如需获取全部功能或基于Android的图书管理系统资源，请点击👉基于Android的图书管理系统

Ｒｕｎ

关注

9
点赞
踩
86

收藏

觉得还不错? 一键收藏
打赏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫