APP用户界面设计

最新推荐文章于 2024-07-16 16:39:46 发布

Tt1_Tt2_Tt3_Tt4

最新推荐文章于 2024-07-16 16:39:46 发布

阅读量436

点赞数

文章标签： android

本文链接：https://blog.csdn.net/Tt1_Tt2_Tt3_Tt4/article/details/120638320

版权

						  Android Studio APP用户界面设计

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

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

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

三、实验过程
1、bottom.xml

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/black">

    <LinearLayout

        android:id="@+id/tangseng"
        style="@style/LinearLayout_tangseng"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">


        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="34dp"
            android:gravity="center"
            android:text="唐僧"
            android:textColor="@color/white"
            android:textSize="24sp" />


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            app:srcCompat="@drawable/img" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/wukong"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="top"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="34dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="悟空"
            android:textColor="@color/white"
            android:textSize="24sp" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            app:srcCompat="@drawable/img_1" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/bajie"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="top"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="34dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="八戒"
            android:textColor="@color/white"
            android:textSize="24sp" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            app:srcCompat="@drawable/img_2" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/shaseng"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="top"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="34dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="沙僧"
            android:textColor="@color/white"
            android:textSize="24sp" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            app:srcCompat="@drawable/img_3" />
    </LinearLayout>

</LinearLayout>

Design界面显示为：
在这里插入图片描述
2.top.xml

<?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:background="@color/black">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:text="西游记"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

Design界面为：
在这里插入图片描述
3.activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

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

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

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

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:content=".Fragment_tangseng">

    <TextView
        android:id="@+id/id_content"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是唐僧界面"
        android:textSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>

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();
    }

}