纯属Android端页面UI学习

1.底部导航栏BottomNavigationView

 

xml代码简单，需要两个组件 fragment 和 com.google.android.material.bottomnavigation.BottomNavigationView

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="408dp"
        android:layout_height="645dp"
        android:layout_marginBottom="70dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@id/nav_view"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:navGraph="@navigation/mobile_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginBottom="70dp"
        android:background="?android:attr/windowBackground"
        app:itemTextColor="#7C7C44"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/nav_host_fragment"
        app:layout_constraintVertical_bias="0.0"
        app:menu="@menu/bottom_nav_menu">

    </com.google.android.material.bottomnavigation.BottomNavigationView>

    <TextView
        android:id="@+id/tv_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/nav_view" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

同时需要一个menu列表

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_danieledesantis_christmas_snowman"
        android:title="@string/title_home"/>

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_danieledesantis_christmas_gift"
        android:title="@string/title_dashboard"/>

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_danieledesantis_christmas_wreath"
        android:title="@string/title_notifications" />

    <item
        android:id="@+id/navigation_self"
        android:icon="@drawable/ic_danieledesantis_christmas_santa_claus"
        android:title="@string/title_self"/>
</menu>

 

navigation .xml文件

<?xml version="1.0" encoding="utf-8"?>
<navigation 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/mobile_navigation"
    app:startDestination="@+id/navigation_home">


    <fragment
        android:id="@+id/navigation_home"
        android:name="com.example.big_creat.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.example.big_creat.ui.dashboard.DashboardFragment"
        android:label="@string/title_dashboard"
        tools:layout="@layout/fragment_dashboard" />

    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.example.big_creat.ui.notifications.NotificationsFragment"
        android:label="@string/title_notifications"
        tools:layout="@layout/fragment_notifications" />
    <fragment
        android:id="@+id/navigation_self"
        android:name="com.example.big_creat.ui.self.self"
        android:label="@string/title_self"
        tools:layout="@layout/self" />
</navigation>

 

JAVA 代码

package com.example.big_creat;

import android.annotation.SuppressLint;
import android.content.ClipData;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;


import com.google.android.material.bottomnavigation.BottomNavigationView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.NavDestination;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;

public class MainActivity extends AppCompatActivity {
    final private int RED = 110;
    final private int GREEN = 111;
    final private int BLUE = 112;
    final private int YELLOW = 113;
    final private int GRAY= 114;
    final private int CYAN= 115;
    final private int BLACK= 116;
    private TextView tv_test;

    @SuppressLint("ResourceAsColor")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView navView = findViewById(R.id.nav_view);
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications, R.id.navigation_self)
                .build();

        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupWithNavController(navView, navController);
        tv_test = (TextView) findViewById(R.id.tv_test);

    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        menu.add(1,RED,4,"红色");
        menu.add(1,GREEN,2,"绿色");
        menu.add(1,BLUE,3,"蓝色");
        menu.add(1,YELLOW,1,"黄色");
        menu.add(1,GRAY,5,"灰色");
        menu.add(1,CYAN,6,"蓝绿色");
        menu.add(1,BLACK,7,"黑色");
        menu.add(2,9,8,"黑色");
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        switch (id){
            case RED:
                tv_test.setTextColor(Color.RED);
                break;
            case GREEN:
                tv_test.setTextColor(Color.GREEN);
                break;
            case BLUE:
                tv_test.setTextColor(Color.BLUE);
                break;
            case YELLOW:
                tv_test.setTextColor(Color.YELLOW);
                break;
            case GRAY:
                tv_test.setTextColor(Color.GRAY);
                break;
            case CYAN:
                tv_test.setTextColor(Color.CYAN);
                break;
            case BLACK:
                tv_test.setTextColor(Color.BLACK);
                break;
            case 9:
                tv_test.setTextColor(Color.BLACK);
                break;

        }
        return super.onOptionsItemSelected(item);
    }

}

2.spinner组件——实现下拉选择选项

<Spinner
     android:id="@+id/category"
     android:layout_width="167dp"
　　　android:layout_height="match_parent"
　　　android:layout_marginLeft="10dp">
</Spinner>

java代码：

private Spinner spinner;
private ArrayList<dishess> mDate=null;
private BaseAdapter myAdadpter = null;

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.add)；

mDate = new ArrayList<dishess>();

mDate.add(new dishess(getResources().getDrawable(R.mipmap.ic_launcher_huoguo),"火锅"));
        mDate.add(new dishess(getResources().getDrawable(R.mipmap.ic_launcher_baozi),"包子"));
        mDate.add(new dishess(getResources().getDrawable(R.mipmap.ic_launcher_kafei),"咖啡"));
        mDate.add(new dishess(getResources().getDrawable(R.mipmap.ic_launcher_kuaizi),"筷子"));
        mDate.add(new dishess(getResources().getDrawable(R.mipmap.ic_channel_foreground),"筷子"));

 myAdadpter = new MyAdapter<dishess>(mDate,R.layout.item_spin_hero) {
            @Override
            public void bindView(ViewHolder holder, dishess obj) {
                holder.setImageResource(R.id.img_dish,obj.getIcon());
                holder.setText(R.id.text_dish,obj.getiName());
            }
        };
}

3.复选框

一连串<CheckBox>组件，定义不同的id和text

<CheckBox
                        android:id="@+id/bitter"
                        android:layout_width="53dp"
                        android:layout_height="30dp"
                        android:text="苦" />

                    <CheckBox
                        android:id="@+id/salt"
                        android:layout_width="53dp"
                        android:layout_height="30dp"

                        android:text="咸" />

                    <CheckBox
                        android:id="@+id/sour"
                        android:layout_width="53dp"
                        android:layout_height="30dp"
                        android:text="酸" />

                    <CheckBox
                        android:id="@+id/fresh"
                        android:layout_width="53dp"
                        android:layout_height="30dp"
                        android:text="鲜" />

                    <CheckBox
                        android:id="@+id/sweet"
                        android:layout_width="53dp"
                        android:layout_height="30dp"
                        android:text="甜" />

                    <CheckBox
                        android:id="@+id/spicy"
                        android:layout_width="62dp"
                        android:layout_height="33dp"

                        android:text="辣" />

java监听

private CheckBox sour;
    private CheckBox sweet;
    private CheckBox fresh;
    private CheckBox spicy;
    private CheckBox salt;
    private CheckBox bitter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.add);
 sour = (CheckBox)findViewById(R.id.sour);
        salt = (CheckBox)findViewById(R.id.salt);
        fresh = (CheckBox)findViewById(R.id.fresh);
        bitter = (CheckBox)findViewById(R.id.bitter);
        spicy = (CheckBox)findViewById(R.id.spicy);
        sweet = (CheckBox)findViewById(R.id.sweet);

 sour.setOnCheckedChangeListener(this);
        sweet.setOnCheckedChangeListener(this);
        spicy.setOnCheckedChangeListener(this);
        salt.setOnCheckedChangeListener(this);
        bitter.setOnCheckedChangeListener(this);
        fresh.setOnCheckedChangeListener(this);
}

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(buttonView.isChecked())
            Log.d("复选",buttonView.getText().toString());
    }