App门户页面设计与开发(类微信界面)

'\t'

已于 2023-10-29 23:50:19 修改

阅读量61

点赞数

文章标签：微信 gitee

于 2023-10-16 15:27:44 首次发布

本文链接：https://blog.csdn.net/2301_76470445/article/details/133850193

版权

一、内容简介

设计一个app的门户框架，实现4个tab切换效果和列表滚动效果；

二、框架实现过程

1.整体

设计一个由上中下构成的主界面，布局如图；

<?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">

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        >

    </FrameLayout>

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

</LinearLayout>

2.顶部

top.xml：居中展示APP名字；


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/linearLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffe4e1">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Cat"
        android:textColor="#8b4513"
        android:textSize="50sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

   

</androidx.constraintlayout.widget.ConstraintLayout>

效果：

3.底部

bottom.xml

以单个垂直LinearLayout为例：插入一个ImageView图像和一个TextView文本框

重复该步骤，划分出四个小区域为实现点击小区域切换tab功能做准备

<?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="wrap_content"
    android:background="#ffe4e1">


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

        <ImageView
            android:id="@+id/tab_iv_wechat"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@drawable/cat1"></ImageView>
        <TextView
            android:id="@+id/text_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="消息"
            android:textColor="#8b4513"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

效果:

添加图片tip：将要添加的图片文件复制到项目的 "res" 文件夹下的 "drawable" 子文件夹中。在需要使用图片的布局文件中，在合适的位置添加 ImageView 组件。在 ImageView 组件中，使用 android:src 属性来设置图片的路径。例如，如果图片文件为 "my_image.png"，则应将 android:src 属性设置为 "@drawable/my_image"。

4.中部

fragment：展示点击底部按钮后显示的内容，能够随着按钮的切换而显示不同的内容，使用四个fragment组件

以Fragment1.(Java)为例

public class Fragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment1,container, false);
    }
}

fragment1.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">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:textColor="#ffa07a"
        android:text="这是消息界面"
        android:textSize="30sp" />
</LinearLayout>

效果：

三、功能实现

1.tab切换(MainActivity1)

（1）onCreate函数

setOnClickListener() 方法为按钮注册一个监听器，点击按钮时就会执行监听器中的 onClick() 方法通过监听所点击LinearLayout的id，来展示所对应的Fragment页面。

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main1);
        linearLayout1 = findViewById(R.id.id_tab_wechat);
        linearLayout2 = findViewById(R.id.id_tab_addrList);
        linearLayout3 = findViewById(R.id.id_tab_friendsCircle);
        linearLayout4 = findViewById(R.id.id_tab_my);

        fragmentManager = getSupportFragmentManager();

        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        fragment4 = new Fragment4();
        

        innitial();
        fragmentshow(fragment1);//默认展示页面

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

    }

    public void onClick(View view) {

        if (view.getId() == l1)
            fragmentshow(fragment1);
        else if (view.getId() == l2)
            fragmentshow(fragment2);
        else if (view.getId() == l3)
            fragmentshow(fragment3);
        else if (view.getId() == l4)
            fragmentshow(fragment4);
    }

（2）innitial函数

添加fragment组件

private void innitial() {
        FragmentTransaction transaction = fragmentManager.beginTransaction()
                .add(R.id.content, fragment1)
                .add(R.id.content, fragment2)
                .add(R.id.content, fragment3)
                .add(R.id.content, fragment4);
        transaction.commit();

    }

（3）fragmentHide函数

隐藏未被展示的页面

 private void fragmentHide() {
        FragmentTransaction ft = fragmentManager.beginTransaction()
                .hide(fragment1)
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        ft.commit();
    }

(4)showFragment函数

展示fragment组件

private void fragmentshow(Fragment fragment) {
        fragmentHide();
        FragmentTransaction ft = fragmentManager.beginTransaction()
                .show(fragment);
        ft.commit();
    }

2.列表滚动

(1)Myadapter

public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> {//打小气泡 放行传入

    Context context1;
    List<String> list1;

    public Myadapter(Context context,List list){
        context1=context;
        list1=list;

    }
    @NonNull
    @Override
    public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view=LayoutInflater.from(context1).inflate(R.layout.item2,parent,false);
        Myholder myholder=new Myholder(view);

        return myholder;
    }

    @Override//用于将数据绑定到ViewHolder中的视图上。
    public void onBindViewHolder(@NonNull Myholder holder, int position) {

        holder.textView.setText(list1.get(position));
        holder.textView.setTextColor(Color.RED);

    }


    @Override
    public int getItemCount() {
        return list1.size();
    }//返回item数量
    
    public class Myholder extends RecyclerView.ViewHolder{
        TextView textView;

        public Myholder(@NonNull View itemView) {
            super(itemView);
            textView=itemView.findViewById(R.id.text21);
        }
    }

}

(2)item2.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="wrap_content">

    <TextView
        android:id="@+id/text21"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView"
        android:textColor="@color/black"
        android:textSize="35sp"
        />
</LinearLayout>