Android Studio 类微信页面

本项目是利用Android Studio工具实现一个类微信界面。
要求完成以下需求：`

页面具有标题微信
页面具有中间显示框
页面具有底部选择框，并且具有选择事件
页面底部选择框在进行改变的时候，我们需要中间显示框的页面同步改变
页面的布局清晰

项目效果如下：
在这里插入图片描述

（图标颜色没有选好哈哈哈）

1.按钮图标文件准备：
这里是从阿里图标库获得的图标，可以自行选择图片格式和大小下载，由于需要做一个类微信界面，所以选择了消息，朋友，通讯录和设置四个初始图标还有对应的四个点击按钮之后颜色变化的图标。此外再选择一个背景的点九图片，这个点九图片也可以利用Android Studio自带工具对图片生成点九格式，具体可以自行百度，这里不展开介绍了。
图标文件可以通过ctrl+C/V粘贴在res下的drawable文件夹下，注意图片命名不要有空格汉字。
在这里插入图片描述
2.主界面布局
首先可以观察到微信界面分为三部分：头部显示App的名字：微信，底部四个按钮，中间部分通过点击会显示不同的界面。
所以我们需要通过res新建六个个layout xml文件，包括一个头部显示的top.xml文件，底部按钮的bottom.xml文件，还有点击四个按钮显示的不同界面的xml文件。最后再在activity_main.xml文件里引入这些xml文件，中间加入一个FrameLayout开辟出一块空白区域可以自己加一些控件。
1.top.xml文件
采用线性布局，再引入一个TextView控件，显示文字“微信”，配置如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="65dp"
    android:background="#000000"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/app_name"
        android:textColor="#ffffff"
        android:textSize="35sp" />
</LinearLayout>

设置LinerLayout为垂直线性布局，background设置为黑色，gravity为center，TextView字体颜色设置为白色，layout_gravity为center_horizontal，保持字体居中，text具体内容可以用res下的strings.xml文件里的app_name，这个可以自行设置。

 <string name="app_name">"微信"</string>

字体颜色还有大小都可以自行设置。
2.bottom.xml
底部布局就是要把按钮和文字纵向排布，再把这四块横向排布出来，所以可以在最外层放置一个水平的LinearLayout,再在里面放置四个垂直的LinearLayout，里面的每个LinearLayout都放置一个ImageButton和一个TextView控件。
内层LinearLayout需要修改如下几个配置：

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

ImageButton和TextView控件配置如下：

<ImageButton
            android:id="@+id/imageButton_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:contentDescription="@string/app_name"
            android:clickable="false"
            app:srcCompat="@drawable/message" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="@string/app_message"
            android:gravity="center"
            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="20sp" />

其他几个内层LinearLayout类似设置，TextView和前面类似的设置颜色，字体大小即可，注意要居中，ImageButton选择对应的图片就行，再设置一下background.
3.点击四个按钮显示的界面文件（tab01,tab02,tab03,tab04)
新建四个layout.xml文件，这个内容比较简单，可以自己任意设置，就添加了一个TextView控件，和前面top.xml文件配置的最大区别就是把gravity设置为“center”，居中，这里自由发挥算了。
4.activity_main.xml
LinearLayout设置为vertical，通过include引入底部和头部文件，中间再加一个FrameLayout设置layout_width，layout_height，layout_weight属性。
配置如下：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp">

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

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

        </FrameLayout>
        <include layout="@layout/bottom"/>
    </LinearLayout>

这样，主界面布局基本完成了。
3.主程序编写
首先一般在App前面会有一个文字为项目名称的框，为了把这个框去掉可以增加这样一条语句

requestWindowFeature(Window.FEATURE_NO_TITLE);

这样就会把界面前面的框去掉了。
编写的整体思路就是我们点击不同的按钮，主布局文件里的framelayout能够转换显示不同的界面，所以这里需要新建四个对应的fragment类为了添加显示framelayout的不同布局文件。
例如messageFragment配置如下，继承自Fragment，一个空构造含函数。
onCreateView() 提供了一个 LayoutInflater 对象，用于加载布局文件tab01.xml（前面已经写好的tab01.xml）.

public class messageFragment extends Fragment {
    
    


    public messageFragment() {
    
    
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
    
    
        return inflater.inflate(R.layout.tab01,container,false);
    }

}

其他的Fragment类类似返回不同按钮的界面
准备好之后那么我们就可以进行主函数的编写了，采用java编写就是利用面向对象编程的方法，创建对应的LinearLayout，ImageButton，Fragment实例化对象，注意实例化FragmentManager，目的就是为了通过

fm = getFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();

来操作多个Fragment之间的切换（hide,add）
（如果对Fragment不太理解可以好好学习)
然后就要先实现两个函数用于对fragment和view的初始化，这个就不展示出来了，再需要定义一个函数根据点击显示使原来的图标发生颜色变化，通过switch来切换，注意在这个函数里调用一个自定义的hidefragment函数用于隐藏fragment界面，要不然后面再显示界面就会发生重叠现象。部分代码结构如下，使用switch转换，下面的类似

扫描二维码关注公众号，回复： 11931918 查看本文章

private void setSelect(int i){
    
    
 FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        //把图片设置为亮的
        switch (i){
    
    
            case 0:
                Log.d("setSelect","1");
                transaction.show(Tab01);
                ImgMessage.setImageResource(R.drawable.message_tab);
                break;

最后重点就是一个点击函数获取对应的fragment界面和对底部按钮点击函数的监听，实现setOnClickListener传入this就可以了，点击函数事件控制还是用的switch切换到不同的fragment，自定义的函数resetImags是为了初始显示图标均为灰色，这个用setImageResource自己选择drawable对应需要的图片就行了，下面的id_tab_message指的是bottom.xml里面内层的LinearLayout，这样无论点击按钮还是文字都会被监听到，都会产生点击效果。

public void onClick(View v)
    {
    
    
        Log.d("onClick","1");
        resetImgs();
        switch(v.getId()){
    
    
            case R.id.id_tab_message:
                Log.d("onClick","2");
                setSelect(0);
                break;

其余部分就不细说了，整体思路清楚了，写代码的时候一步一步调，缺啥补充就行了。
4.完整代码如下：
有需要的请移步完整代码

Android Studio 类微信页面

Android Studio 类微信页面

猜你喜欢