app分类导航页

先展示导航页如下

　　其中这六个分类按钮制作方法都一样，并且页面整体具有一定的屏幕适应性，可根据屏幕大小自动调整放置位置。
　　
一、导航activity页面xml设置（first_nav_main.xml）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/first_nav_bg"
    android:id="@+id/nav_relative">


<!--为了设备的兼容性，考虑实时的对设备的屏幕大小进行测量，进而设置控件到边框的距离-->
<!--ren.define.circlepictext.CirclePicText为设计的一个按钮控件，包含文字圆形图片以及背景-->
    <ren.define.circlepictext.CirclePicText
        android:id="@+id/circlepic_lefttop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        <!--这里设置渐变色背景-->
        android:background="@drawable/layout_bg_selector"
        />
        
    <!--这里需要设置靠右边框的距离，所以需要将alignParentRight设置为true，以便右对齐-->
    <ren.define.circlepictext.CirclePicText
        android:id="@+id/circlepic_righttop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/layout_bg_selector"
        android:layout_alignParentRight="true"
        />

    <ren.define.circlepictext.CirclePicText
        android:id="@+id/circlepic_leftmid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/layout_bg_selector"
        android:layout_marginTop="30dp"
        android:layout_below="@+id/circlepic_lefttop"
        />
        
    <ren.define.circlepictext.CirclePicText
        android:id="@+id/circlepic_rightmid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/layout_bg_selector"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/circlepic_righttop"
        android:layout_marginTop="30dp"
        />

    <ren.define.circlepictext.CirclePicText
        android:id="@+id/circlepic_leftdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/layout_bg_selector"
        android:layout_marginTop="30dp"
        android:layout_below="@+id/circlepic_leftmid"
        />

    <ren.define.circlepictext.CirclePicText
        android:id="@+id/circlepic_rightdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/layout_bg_selector"
        android:layout_below="@+id/circlepic_rightmid"
        android:layout_marginTop="30dp"
        android:layout_alignParentRight="true"
        />
        
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/circlepic_rightdown"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_margin="15dp"
        android:gravity="center_horizontal"
        >
    </LinearLayout>
</RelativeLayout>
</RelativeLayout>

1.1 ren.define.circlepictext.CirclePicText控件设计

将CirclePicText 继承自RelativeLayout （实际上就是在RelativeLayout 中加载文字和圆形图片控件，加以修改后形成一个新的控件）

package ren.define.circlepictext;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.ronda.bluetoothassist.R;
import de.hdodenhof.circleimageview.CircleImageView;

/*
 *
 *类描述：
 *创建人：R
 *创建时间：${DATA}16:06
 *
 */public class CirclePicText extends RelativeLayout {
     private TextView pictextView;
     private CircleImageView piccircleImageView;

    public CirclePicText(Context context) {
        super(context);
    }

    public CirclePicText(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.imag_text_bt,this,true);
        //当attachtoroot是true时，会把加载的layout布局返回的view控件加入到this，并且返回root布局。
        // 如果当attachtoroot是false时，则会直接返回layout，不将view添加到this中，但是layout的参数会起作用   测试结果：attach变成false以后程序无法启动
        //如果root传入的是null，则最后得到的layout的layout_width  layout_height属性不会起作用
        piccircleImageView =(CircleImageView)findViewById(R.id.image_pic_view);
        pictextView = (TextView)findViewById(R.id.image_text);
	　　 setClickable(true);//layout默认是不可点击的   测试成功:监听器可以将控件变成可点击的
        setFocusable(true);

    }

//设置图片资源
    public void setText_Image(int pic, String name, String color)
    {
        pictextView.setText(name);
        piccircleImageView.setImageResource(pic);
        setImageBackgroundColor(piccircleImageView,color);
    }

//设置圆形图片的背景色
    private void setImageBackgroundColor(CircleImageView piccircleImageView, String color) {
        if(piccircleImageView ==null)
            return;
        GradientDrawable gradientDrawable = (GradientDrawable)piccircleImageView.getBackground();
        gradientDrawable.setColor(Color.parseColor(color));
    }
}

再来看看往这个RelativeLayout 布局中加载进去的xml布局（LayoutInflater.from(context).inflate(R.layout.imag_text_bt,this,true);）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="150dp"
    android:layout_height="150dp"
    >

    <TextView
        android:id="@+id/image_text"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:layout_marginLeft="15dp"
        />

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_toRightOf="@+id/image_text"
        android:id="@+id/image_pic_view"
        android:layout_centerVertical="true"
        android:background="@drawable/bt_bg_normal"

        />

</RelativeLayout>

然后再来探究一下点击后背景变色是如何设置的，在ren.define.circlepictext.CirclePicText中可以看见这么一个设置　　android:background="@drawable/layout_bg_selector"，这是设置了一个选择器selector。这个selector中，根据按钮按下的状态改变按钮的形状和背景颜色为layout_bg_normal.xml或者layout_bg_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/layout_bg_normal" android:state_pressed="false"/>
    <item android:drawable="@drawable/layout_bg_pressed" android:state_pressed="true"/>
</selector>

二、activity代码调整xml布局中的控件位置
　　activity 的布局可以使用xml文件进行静态布局，也可以使用代码进行动态布局，xml布局更加的简单明了，代码布局更加的灵活，两者也可以混合进行布局。
　　此次页面使用的两者结合的方法，先使用静态xml布局，在通过代码进行相应的调整。（先测量屏幕大小，在进行相应的控件位置调整，以提高适应性）

package com.ronda.bluetoothassist;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.view.WindowManager;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.ronda.bluetoothassist.about.About;
import com.ronda.bluetoothassist.graph_container.JumpActivity;
import com.ronda.bluetoothassist.history.HistoryActivity;
import com.ronda.bluetoothassist.linesets.LineChatActivity;
import com.ronda.bluetoothassist.linesets.MyChatActivity;

import androidx.appcompat.app.AppCompatActivity;
import ren.define.circlepictext.CirclePicText;



public class NavPageActivity extends AppCompatActivity {
    private CirclePicText[] circlePic =new CirclePicText[6];
    private int screenWidth;
    private int screenHight;

    //导航页的数据（包括控件的ID、文字和颜色）
    private int[] circlepicID={R.id.circlepic_lefttop,R.id.circlepic_leftmid,R.id.circlepic_leftdown,
    R.id.circlepic_righttop,R.id.circlepic_rightmid,R.id.circlepic_rightdown};
    private int[] imageDrawable={R.mipmap.ipw,R.mipmap.mach_nav,R.mipmap.about_nav,
            R.mipmap.light_nav,R.mipmap.history_nav,R.mipmap.setting_nav};
    private String[] name={"网络参数","设备","关于","安全警报","历史数据","应用设置"};
//          下面color中可以填入下面的字符串，例如“red”、“gray”
//        * 'red', 'blue', 'green', 'black', 'white', 'gray', 'cyan', 'magenta',
//        * 'yellow', 'lightgray', 'darkgray', 'grey', 'lightgrey', 'darkgrey',
//        * 'aqua', 'fuchsia', 'lime', 'maroon', 'navy', 'olive', 'purple',
//        * 'silver', 'teal'.
    private String[] color ={"#66CCCC","#FF9999","#CCCCFF","#EE0000","#CC99CC","#FFCC99"};
    //导航页的6个按钮，从左上到右下
//    private MydatabaseHelper mh = new MydatabaseHelper(MyApplication.getContext(),"machDataBase.db",null,1);



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.first_nav_main);
        //测量屏幕的尺寸(dp)
        WindowManager windowManager = (WindowManager)this.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(displayMetrics);
        screenWidth = (int)(displayMetrics.widthPixels/displayMetrics.density);
        screenHight = (int)(displayMetrics.heightPixels/displayMetrics.density);
        
        //设置图片、文字和颜色
        for(int i=0;i<6;i++) {
            circlePic[i] = (CirclePicText) findViewById(circlepicID[i]);
            circlePic[i].setText_Image(imageDrawable[i],name[i],color[i]);
        }

        //利用setPadding设置RelativeLayout中控件到其边缘的距离
        RelativeLayout relativeLayout = (RelativeLayout)findViewById(R.id.nav_relative);
        relativeLayout.setPadding((int)(0.4*displayMetrics.density*(screenWidth-300)),(int)(0.5*displayMetrics.density*(screenHight-510)),(int)(0.4*displayMetrics.density*(screenWidth-300)),(int)(0.01*displayMetrics.density*(screenHight-510)));
    //setPadding参数的单位是像素
    //设置IP按钮的监听器
    circlePic[0].setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            Intent intent = new Intent(NavPageActivity.this,IPChangeActivity.class);
            startActivity(intent);
        }
    });
//设备按钮的监听器
    circlePic[1].setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            Intent intent = new Intent(NavPageActivity.this, JumpActivity.class);
            startActivity(intent);
        }
    });
    //关于按钮的监听器
    circlePic[2].setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(NavPageActivity.this, About.class);
            startActivity(intent);

        }
    });
    //安全警报按钮的监听器
    circlePic[3].setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intentalert = new Intent(NavPageActivity.this, JingBaoActivity.class);
            startActivity(intentalert);
        }
    });
    //历史数据按钮的监听器
    circlePic[4].setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intenthistory = new Intent(NavPageActivity.this, HistoryActivity.class);
            startActivity(intenthistory);

        }
    });
    //设置按钮的监听器
    circlePic[5].setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intentsetting = new Intent(NavPageActivity.this,SettingActivity.class);
            startActivity(intentsetting);

        }
    });



    }







}

来源：CSDN

作者：the_smart_one

链接：https://blog.csdn.net/RCY159/article/details/104678880