移动开发一：类微信门户界面框架设计

最新推荐文章于 2024-10-04 11:47:50 发布

hesibao

最新推荐文章于 2024-10-04 11:47:50 发布

阅读量555

点赞数

文章标签： android java 微信

本文链接：https://blog.csdn.net/qq_57054839/article/details/127128765

版权

本文档详细介绍了如何使用Android的Fragment和Activity来设计一个类似微信的门户界面。包括顶部常驻标识的布局，底部按钮切换时的样式变换及内容切换功能的实现。涉及到线性布局、帧布局的使用，以及点击事件的处理，通过示例代码展示了如何创建和切换不同的内容页面。此外，还提供了相应的资源文件管理和布局文件的编写方法。

摘要由CSDN通过智能技术生成

设计目标：

本作业框架需要使用fragment，activity来实现一个类微信门户界面的设计。

功能说明：

这个框架需要设计出的要点有两点：

1. 顶部标识需要常驻

2. 底部按钮切换时可以变换样式或者颜色，同时主页面内容切换

代码解析：

首先我们先到一些开源的矢量图网站，如阿里巴巴矢量图标库找到我们需要的矢量图图标，找到喜欢的之后下载并存为.png模式。

然后我们把这些图片文件移到我们项目目录的app-src-main-res-drawable目录下。这里我将它们都重命名了，以便于后续使用。

接下来回到AS，在res-layout中新建两个文件，分别是top.xml和bottom.xml，接下来开始对top.xml进行布局以及代码编辑。

top.xml中控件：

控件属性：

linearLayout（这里设置为vertical或者horizontal都会有报错，所以直接加上consrtaint weight）

textview（可以找自己喜欢的颜色，如果没有的话，根据报错补成类似的颜色就好了）

code

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#E69D86"
            android:gravity="center"
            android:text="wechat"
            android:textColor="#01579B"
            android:textSize="40sp" />
    </LinearLayout>

bottom.xml中控件：

控件属性

linearlayout(horizontal)

linearlayout(vertical)

img_chat

textview

code

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@android:drawable/dark_header"
        android:baselineAligned="false"
        android:orientation="horizontal"
        tools:ignore="MissingConstraints">

        <LinearLayout
            android:id="@+id/linear_chat"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onclick"
            android:orientation="vertical">

            <ImageButton
                android:id="@+id/img_chat"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#E69D86"
                android:clickable="false"
                android:contentDescription="@string/app_name"
                android:scaleType="centerInside"
                android:visibility="visible"
                app:srcCompat="@drawable/message_blue" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#E69D86"
                android:gravity="center"
                android:text="微信"
                android:textColor="#283593"
                android:textSize="15dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linear_friend"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onclick"
            android:orientation="vertical">

            <ImageButton
                android:id="@+id/img_friend"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#E69D86"
                android:clickable="false"
                android:contentDescription="@string/app_name"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/friends_blue" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#E69D86"
                android:gravity="center"
                android:text="好友"
                android:textColor="#283593"
                android:textSize="15dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linear_contact"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onclick"
            android:orientation="vertical">

            <ImageButton
                android:id="@+id/img_find"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#E69D86"
                android:clickable="false"
                android:contentDescription="@string/app_name"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/find_blue" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#E69D86"
                android:gravity="center"
                android:text="发现"
                android:textColor="#283593"
                android:textSize="15dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linear_setting"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onClick"
            android:orientation="vertical">

            <ImageButton
                android:id="@+id/img_setting"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#E69D86"
                android:clickable="false"
                android:contentDescription="@string/app_name"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/my_blue" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#E69D86"
                android:gravity="center"
                android:text="我的"
                android:textColor="#283593"
                android:textSize="15dp" />
        </LinearLayout>
    </LinearLayout>

layout_main.xml中控件：

code

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include
            android:id="@id/top"
            layout="@layout/top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@+id/id_content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"></FrameLayout>

        <include
            android:id="@id/bottom"
            layout="@layout/bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

现在我们的布局部分就完成了，需要实现的是切换页面功能。

新建四个xml页面，每个页面都有一个textview来提示主页面已经切换，可以设置属性使其美观

新建四个java文件

将这个四个文件的返回值设置成对应的刚刚所说的.xml文件（这里展示聊天界面的，其余同理）

return inflater.inflate(R.layout.chat_page, container, false);

然后进入MainActivity

初始化成员参数

private Fragment chatFragment =new chat_Fragment();
    private Fragment friendFragment =new friends_Fragment();
    private Fragment findFragment =new find_Fragment();
    private Fragment myFragment =new my_Fragment();
    private  FragmentManager fragmentManager;

    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    private ImageView imageView1,imageView2,imageView3,imageView4;
    private void initFun() {
        linearLayout1=findViewById(R.id.linear_chat);
        linearLayout2=findViewById(R.id.linear_friend);
        linearLayout3=findViewById(R.id.linear_contact);
        linearLayout4=findViewById(R.id.linear_setting);

        imageView1 = findViewById(R.id.img_chat);
        imageView2 = findViewById(R.id.img_friend);
        imageView3= findViewById(R.id.img_find);
        imageView4= findViewById(R.id.img_setting);

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

        initFragment();
    }

注意这里需要将函数改成如下，否则“this”报错

public class MainActivity extends AppCompatActivity implements View.OnClickListener

默认显示聊天界面

private void initFragment(){
        fragmentManager=getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,chatFragment);
        transaction.add(R.id.id_content,friendFragment);
        transaction.add(R.id.id_content,findFragment);
        transaction.add(R.id.id_content,myFragment);
        hideFragment(transaction);
        transaction.show(chatFragment);
        transaction.commit();
    }

隐藏fragment

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(chatFragment);
        transaction.hide(friendFragment);
        transaction.hide(findFragment);
        transaction.hide(myFragment);
    }

图片文字切换

private  void showfragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i) {
            case 0:
                Log.d("setSelect","1");
                transaction.show(chatFragment);
                imageView1.setImageResource(R.drawable.message_orange);
                break;
            case 1:
                transaction.show(friendFragment);
                imageView2.setImageResource(R.drawable.friends_orange);
                break;
            case 2:
                transaction.show(findFragment);
                imageView3.setImageResource(R.drawable.find_orange);
                break;
            case 3:
                transaction.show(myFragment);
                imageView4.setImageResource(R.drawable.my_orange);
                break;
            default:
                break;
        }
        transaction.commit();
    }

重写事件监听

    public void onClick(View v){
        resetImgs();
        switch (v.getId()){
            case R.id.linear_chat:
                showfragment(0);
                break;
            case R.id.linear_friend:
                showfragment(1);
                break;
            case R.id.linear_contact:
                showfragment(2);
                break;
            case R.id.linear_setting:
                showfragment(3);
                break;
            default:
                break;
        }
    }

主体oncreat函数调用

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        initFun();
    }