AS类微信界面（10.2更新）

最新推荐文章于 2022-10-21 16:53:31 发布

IUbreeze

最新推荐文章于 2022-10-21 16:53:31 发布

阅读量1.4k

点赞数

文章标签： android studio

本文链接：https://blog.csdn.net/acquire__/article/details/127144963

版权

本文介绍了如何使用Android Studio设计并实现类似微信的界面，包括去除顶部标题栏，设计top和bottom布局，创建Fragment，整体布局activity_main.xml的设置，以及在MainActivity中实现功能，如点击图标切换页面，并展示了不同页面的效果。

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

一、设计界面：top.xml

二、设计界面：bottom.xml

三、创建Fragment（eg：fragment_chat）

四、整体布局：activity_main.xml

五、功能实现：MainActivity

0、文件声明，导入等

1、onCreate()

2、initFragment()：添加界面

3、initView()：视图选择

4、initEvent()：事件触发

5、selectFragment()：点击时更改图标

6、hidefragment()：令未被选中的三个选项区恢复默认

7、onClick()：触发点击

8、resetImg()：提供默认图标的图像

一、设计界面：top.xml

设计中发现界面上方有一个自带的标题框，需要在app/java/MainActivity中onCreat函数中添加如下代码去除：

     if (getSupportActionBar()!=null)
        {
            getSupportActionBar().hide();
        }

去除自带的标题框后，设计效果及代码如下：

<?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="65dp"
    android:gravity="center"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:text="WeChat"
        android:textColor="#ffffff"
        android:textSize="40sp"/>
</LinearLayout>

二、设计界面：bottom.xml

此处以chat为例，设计效果代码如下：

   <LinearLayout
        android:id="@+id/tab_chat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="bottom">

        <ImageButton
            android:id="@+id/imageButton_chat"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="#ffffff"
            android:src="@drawable/icon_chat"
            android:clickable="false"
            />

        <TextView
            android:id="@+id/textView2_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:saveEnabled="false"
            android:text="chat"
            android:textColor="#000000"
            android:textSize="15sp" />
    </LinearLayout>

其中，bottom.xml文件中：android:clickable="false"这句是为了将图标和图标下方的字体在点击触发时捆绑。

三、创建Fragment（eg：fragment_chat）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:id="@+id/id_chat"
    tools:context=".Fragment_chat">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:saveEnabled="false"