Android Studio 微信界面

·  阅读 1501

界面设计

(1)创建新项目之后在其中创建.xml文件,分别为top和bottom两个文件,然后在其中插入插件,修改其属性。 top控件示例如下:

<?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控件示例如下:

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:layout_weight="1"
    android:background="@color/black"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/id_tab_WeChat_img"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:background="#000000"
        android:clickable="false"
        app:srcCompat="@android:drawable/ic_dialog_email" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:saveEnabled="false"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</LinearLayout>
复制代码

最后top和bottom结果分别如下:

image.png

image.png

(2)合并top与bottom 在layout中的activity_main.xml文件中插入一个framelayout控件,编辑代码

<?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/id_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

    </FrameLayout>

    <include layout="@layout/bottom" />
</LinearLayout>
复制代码

可以得到界面如下:

image.png

监听控制

在layout中创建四个xml文件,tab01,tab02,tab03,tab04,每个文件里添加一个textview,内容为“这里是微信/朋友/通讯录/设置界面”。然后在java文件夹中创建四个Fragment文件,WeChatBlankFragment、FrdBlankFragment、ContactBlankFragment、SettingsBlankFragment。然后在MainActivity文件中写出函数,最后运行结果如下图:

IMG_20211009_142648.png

IMG_20211009_142505.png

gitee仓库:gitee.com/gonnainsane…

分类:
Android
收藏成功!
已添加到「」, 点击更改