android

浩丶忆昔年

已于 2022-09-30 15:39:10 修改

阅读量499

点赞数

文章标签： android studio

于 2022-09-30 15:36:41 首次发布

本文链接：https://blog.csdn.net/m0_65579857/article/details/127122215

版权

使用Android Studio进行微信界面设计

一、设计目标和要求
使用Android Studio进行微信的门户页面框架设计，APP最少必须包含4个tab页面。框架设计需要使用fragment，activity。
二、设计过程
将该微信界面分为三部分组成，分别为页面顶部标题栏（head.xml）,中间页面内容（middle.xml）和页面底部导航栏（button.xml）
1.标题栏
添加一个TextView，填入文字，定义大小和颜色，同时修改和添加一些配置信息。在linearlayout中，我们修改gravity所对应的配置信息为center在TextView中，我们修改layout_gravity所对应的配置信息为center_horizontal。

<?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="wrap_content"
    android:background="#181616"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/txetview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#450E0D0D"
        android:text="微信"
        android:textAlignment="center"
        android:textColor="#F5EFEF"
        android:textSize="30sp" />
</LinearLayout>

在这里插入图片描述

2.中间页面内容
新建四个layout.xml文件，分别添加一个ImageView，修改文字内容，并将ImageView设置居中，修改其对应的配置。
四个页面的代码如下：

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

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:scrollbarStyle="insideInset"
        android:text="这是聊天界面"
        android:textDirection="firstStrongRtl"
        android:textSize="36sp" />
</LinearLayout>

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是联系人界面"
        android:textSize="36sp" />
</LinearLayout>

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

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|center_vertical"
        android:text="这是发现界面"
        android:textSize="36sp" />
</LinearLayout>

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

    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是用户界面"
        android:textSize="36sp" />
</LinearLayout>

在这里插入图片描述

3.底部导航栏
创建layout_bottom.xml文件,外层使用LinearLayout垂直布局，内层使用LinearLayout水平布局，内嵌四个导行按钮，分别对应聊天，联系人，发现和个人中心界面。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout_all"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/chat_active"
            tools:ignore="ImageContrastCheck" />
 
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/bottom_chat"
            android:textAlignment="center" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/layout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/people_normal" />
 
        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/bottom_people"
            android:textAlignment="center" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/layout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/find_normal" />
 
        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/bottom_find"
            android:textAlignment="center" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/layout4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/personal_normal" />
 
        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/bottom_personal"
            android:textAlignment="center" />
    </LinearLayout>
</LinearLayout>

然后对MainActivity和activity_main.xml文件进行编写，activity_main.xml中间部分使用FrameLayout布局填充四个内容区fragment:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">
 
    <include layout="@layout/layout_head" />
 
    <FrameLayout
        android:id="@+id/fragment_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
 
    </FrameLayout>
 
    <include layout="@layout/layout_bottom"
        android:gravity="bottom"/>
</LinearLayout>

MainActivity代码：

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import androidx.fragment.app.FragmentManager;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private FragmentManager fm = getSupportFragmentManager();
    private LinearLayout linearLayout1, linearLayout2, linearLayout3, linearLayout4;
    private ImageView imageView1,imageView2,imageView3,imageView4;
 
    private Fragment chat = new ChatFragment();
    private Fragment people = new PeopleFragment();
    private Fragment find = new FindFragment();
    private Fragment personal = new PersonalFragment();
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        initFragment();
        initImageView();
        showFragment(0);
 
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
    }
 
    private void initFragment() {
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.fragment_content, chat);
        transaction.add(R.id.fragment_content, people);
        transaction.add(R.id.fragment_content, find);
        transaction.add(R.id.fragment_content, personal);
        transaction.commit();
    }
 
    private void initImageView() {
        imageView1 = findViewById(R.id.imageView1);
        imageView2 = findViewById(R.id.imageView2);
        imageView3 = findViewById(R.id.imageView3);
        imageView4 = findViewById(R.id.imageView4);
 
        linearLayout1 = findViewById(R.id.layout1);
        linearLayout2 = findViewById(R.id.layout2);
        linearLayout3 = findViewById(R.id.layout3);
        linearLayout4 = findViewById(R.id.layout4);
    }
 
    private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(chat);
        transaction.hide(people);
        transaction.hide(find);
        transaction.hide(personal);
    }
 
    @Override
    public void onClick(View view) {
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        hideFragment(fragmentTransaction);
        resetImg();
        switch (view.getId()) {
            case R.id.layout1:
                showFragment(0);
                break;
            case R.id.layout2:
                showFragment(1);
                break;
            case R.id.layout3:
                showFragment(2);
                break;
            case R.id.layout4:
                showFragment(3);
                break;
            default:
                break;
        }
    }
 
    private void resetImg() {    //调用灰色的图片，以让点击过后的图片回复原色
        imageView1.setImageResource(R.drawable.chat_normal);
        imageView2.setImageResource(R.drawable.people_normal);
        imageView3.setImageResource(R.drawable.find_normal);
        imageView4.setImageResource(R.drawable.personal_normal);
 
    }
 
    private void showFragment(int i) {    //控制图片颜色的变换，其意义是点击一个图片之后该图片就会变亮
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i) {
            case 0:
                transaction.show(chat);
                imageView1.setImageResource(R.drawable.chat_active);
                break;
            case 1:
                transaction.show(people);
                imageView2.setImageResource(R.drawable.people_active);
                break;
            case 2:
                transaction.show(find);
                imageView3.setImageResource(R.drawable.find_active);
                break;
            case 3:
                transaction.show(personal);
                imageView4.setImageResource(R.drawable.personal_active);
                break;
            default:
                break;
        }
        transaction.commit();
    }
}