APP用户界面设计

						  Android Studio APP用户界面设计

时间：2021年10月6日
一、设计主题
APP用户界面设计

Android Studio设计的界面具备的功能：
1、可以展示出唐僧、悟空、八戒、沙僧四个主界面；
2、可以在四个主界面之间自由切换；
3、界面上方栏有标题居左，界面中间显示内容，内容随下方栏的选择而切换，界面下方栏分成四个小板块可点击切换。

二、设计内容
界面呈现如下效果：

三、实验过程
1、bottom.xml

Design界面显示为：

2.top.xml

Design界面为：

3.activity_main.xml

Design界面设计：

4.内容分段fragement.xml
界面中间显示内容，有四个主界面所以要有四个xml分别对应。四个xml代码基本一样只需要修改文本内容即可，这儿就只展示了第一个唐僧界面的fragment_tangseng.xml。

5、内容分段对应java文件
仅展示其中一个java文件，其余三个文件都类似

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;

public class tangsengFragment extends Fragment {
        public tangsengFragment() {
            // Required empty public constructor
        }

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

5、主函数MainActivity.java

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
	//fragment
    private Fragment fragement_tangseng = new tangsengFragment();
    private Fragment fragment_wukong = new wukongFragment();
    private Fragment fragment_bajie = new bajieFragment();
    private Fragment fragment_shaseng= new shasengFragment();
	
    private FragmentManager fragmentManager;

    private LinearLayout linearLayout1;
    private LinearLayout linearLayout2;
    private LinearLayout linearLayout3;
    private LinearLayout linearLayout4;

    private ImageView imageView1;
    private ImageView imageView2;
    private ImageView imageView3;
    private ImageView imageView4;

    private TextView textView1;
    private TextView textView2;
    private TextView textView3;
    private TextView textView4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
  		//调用父类onCreat方法
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
 		//设置Activity布局界面，访问activity_main.xml布局资源文件
        setContentView(R.layout.activity_main);
        //为定义的布局查找组件
        linearLayout1=findViewById(R.id.tangseng);
        linearLayout2=findViewById(R.id.wukong);
        linearLayout3=findViewById(R.id.bajie);
        linearLayout4=findViewById(R.id.shaseng);
		//为四个事件添加监听
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
		//引用函数，初始化布局，使得初始界面为首fragment
        initFragment();
        showfragment(0);
        initView();

    }
    //初始化四个imageview以及textview
    private void initView() {

        imageView1=findViewById(R.id.imageView1);
        imageView2=findViewById(R.id.imageView2);
        imageView3=findViewById(R.id.imageView3);
        imageView4=findViewById(R.id.imageView4);

        textView1=findViewById(R.id.textView1);
        textView2=findViewById(R.id.textView2);
        textView3=findViewById(R.id.textView3);
        textView4=findViewById(R.id.textView4);
    }
	//利用transaction实现fragment的切换
    private void initFragment() {
        fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.frame_content,fragement_tangseng);
        transaction.add(R.id.frame_content,fragment_wukong);
        transaction.add(R.id.frame_content,fragment_bajie);
        transaction.add(R.id.frame_content,fragment_shaseng);
        transaction.commit();
    }
	//将没有使用的界面的fragment的内容隐藏起来
    private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(fragement_tangseng);
        transaction.hide(fragment_wukong);
        transaction.hide(fragment_bajie);
        transaction.hide(fragment_shaseng);
    }
	//单击设计
    @Override
    public void onClick(View v) {
        
        switch (v.getId()){
            case R.id.tangseng:
            //展示索引为0的界面
                showfragment(0);
                break;
            case R.id.wukong:
                showfragment(1);
                break;
            case R.id.bajie:
                showfragment(2);
                break;
            case R.id.shaseng:
                showfragment(3);
                break;
            default:
                break;
        }
    }
	//显示正在使用界面的fragment的内容
    private void showfragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        //展示第一个界面时需要隐藏其他界面
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(fragement_tangseng);
                break;
            case 1:
                transaction.show(fragment_wukong);
                break;
            case 2:
                transaction.show(fragment_bajie);
                break;
            case 3:
                transaction.show(fragment_shaseng);
                break;
        }
        transaction.commit();
    }

}

运行界面展示：

源码的代码仓库地址：
(https://gitee.com/t1t2t3t4/ASdesign)