安卓第一次作业：类微信的门户页面框架设计

环869

已于 2022-09-29 11:18:44 修改

阅读量545

点赞数 1

文章标签： android android studio ide

于 2022-09-29 11:16:10 首次发布

本文链接：https://blog.csdn.net/qq_62836533/article/details/127102907

版权

一.实验环境：

Windows系统，Android Studio

二.界面功能

1.可展示出四个可切换界面：微信、朋友、通讯录、设置；
2.上方栏标题居中，内容随下方栏的选择而切换，下方栏可点击切换，点击过的界面的图标为绿色，没有点击的界面的图标为灰色；
3.主要从top、bottom、中间fragment布局以及MainActivity四个方面分析。

三.界面设计代码

1.顶部top.xml文件

在res文件夹的layout中新建top.xml，将标题栏的内容居中，并将背景色(android:background)调为黑色，文字(android:textColor)调为白色。

<?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="50dp"
    android:background="@color/black"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="WeChat"
        android:textColor="@color/white"
        android:layout_gravity="center"
        android:textSize="30sp" />
</LinearLayout>

设置后的效果如下图

2.底部bottom.xml文件

首先将图标复制粘贴到drawable中，在res文件夹的layout中新建bottom.xml，拖入TextView拖入ImageButton后会调用drawable，选取所需的图标。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal"
    android:layout_gravity="bottom"
    android:baselineAligned="false">

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

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

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="微信"
            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="15sp" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="朋友"
            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="15sp" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="15sp" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="设置"
            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="15sp" />
    </LinearLayout>
</LinearLayout>

设置后的效果如下图

3.中间fragment.xml文件

这个是聊天界面的fragment设计，此处将第一个界面微信界面作为例子，其他三个和该xml文件相似，只用修改其中的文本属性(android:text)即可。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_chat"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="30sp" />
</LinearLayout>

微信聊天界面的设置效果如下图

4.窗体总布局的activity_main.xml文件

这个文件中使用了include和FrameLayout(重叠布局)来导入我们设置的top和bottom的xml文件，而且设置了Fragment对应的区域。

<?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="0dp"
        android:layout_weight="1">

    </FrameLayout>

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

</LinearLayout>

5.fragment.xml对应的.java文件

自定义的Fragment类继承Fragment类，重写其中的onCreateView方法，用于返回我们所创建的关于聊天的fragment_chat.xml 。这里展示ChatFragment.java文件作为例子，其他三个文件只需要修改其中所需layout属性的id值即可。

package com.example.homework;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.app.Fragment;


public class ChatFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

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

    public static ChatFragment newInstance(String param1, String param2) {
        ChatFragment fragment = new ChatFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_chat, container, false);
    }
}

6.MainActivity.java文件

在文件中，我们设置了有关四个fragment片段的变化代码，底部的click事件，以及底部图标和文字的变化代码。通过这些代码实现底部点击后界面的图标由灰色变为绿色，且可以在图标之间进行点击切换操作。

package com.example.homework;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements View.OnClickListener {

    private final Fragment mTab01 = new ChatFragment();
    private final Fragment mTab02 = new FrdFragment();
    private final Fragment mTab03 = new ContactsFragment();
    private final Fragment mTab04 = new SettingsFragment();

    private FragmentManager fm;

    private LinearLayout mTabWeiXin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabContact;
    private LinearLayout mTabSettings;

    private ImageButton mImgTabWeiXin;
    private ImageButton mImgTabFrd;
    private ImageButton mImgTabContact;
    private ImageButton mImgTabSettings;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE );
        setContentView(R.layout.activity_main);

        initView();
        initFragment();
        initEvent();
        SelectFragment(0);
    }

    private void initFragment(){
        fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(android.R.id.content, mTab01);
        transaction.add(android.R.id.content, mTab02);
        transaction.add(android.R.id.content, mTab03);
        transaction.add(android.R.id.content, mTab04);
        transaction.commit();
    }

    private void initView(){
        mTabWeiXin= findViewById(R.id.id_tab_weixin);
        mTabFrd= findViewById(R.id.id_tab_frd);
        mTabContact= findViewById(R.id.id_tab_contact);
        mTabSettings= findViewById(R.id.id_tab_settings);

        mImgTabWeiXin = findViewById(R.id.id_tab_weixin_img);
        mImgTabFrd = findViewById(R.id.id_tab_frd_img);
        mImgTabContact = findViewById(R.id.id_tab_contact_img);
        mImgTabSettings = findViewById(R.id.id_tab_settings_img);
    }

    private void initEvent(){
        mTabWeiXin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContact.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }

    private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }

    private void SelectFragment(int i){
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        //把图片设置为亮的
        //设置内容区域
        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgTabWeiXin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgTabFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgTabContact.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgTabSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    @SuppressLint("NonConstantResourceId")
    @Override
    public void onClick(View view) {
        ResetImg();
        switch (view.getId()){
            case R.id.id_tab_weixin:
                SelectFragment(0);
                break;
            case R.id.id_tab_frd:
                SelectFragment(1);
                break;
            case R.id.id_tab_contact:
                SelectFragment(2);
                break;
            case R.id.id_tab_settings:
                SelectFragment(3);
                break;
        }
    }

    public void ResetImg(){
        //图片变灰
        mImgTabWeiXin.setImageResource(R.drawable.tab_weixin_normal);
        mImgTabFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgTabContact.setImageResource(R.drawable.tab_address_normal);
        mImgTabSettings.setImageResource(R.drawable.tab_settings_normal);
    }
}

四.运行界面展示

五.实验小结

本次实验，我们通过导入top和bottom实现了布局中顶层和底部的实现，而且通过中间的fragment片段实现了对应界面的展示以及隐藏。通过onclick的监听器实现了点击事件的完成，熟悉了几个基础的组件例如LinearLayout，ImageView等的使用。

在实验中我也遇到了许多问题，例如运行程序时候一直报错keep stopping，无法启动app，然后经过在logcat中的查看，发现错误位于MainActivity文件中，报错提示为 Caused by:java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.这是因为MainActivity继承了AppCompatActivity就回出现上述错误，解决的办法就是让MainActivity去继承Activity，而不是AppCompatActivity，改完之后，再导入Activity包即可正常运行app。