Android Material Design入门篇《一》

最新推荐文章于 2022-06-13 20:33:54 发布

KdanMin

最新推荐文章于 2022-06-13 20:33:54 发布

阅读量703

点赞数 1

分类专栏：【Android MD 5.0系列】文章标签： android relativelayout

本文链接：https://blog.csdn.net/qq_15950325/article/details/54145311

版权

【Android MD 5.0系列】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

TopBar
主要包括左边文本文本颜色文本背景
中间部分包括标题标题颜色
右边包括文本文本颜色文本背景

下面分别说下实现代码
其实像TopBar很多地方都是可以复用因此可以抽象出来
通过自定义View实现
下面说下在res目录下新建一个attrs.xml文件相信大家只要看过源码的应该非常清楚，TopBar继承RelativeLayout的父类是ViewGroup这里简单画张图

下面直接看attrs文件相信大家也非常清楚想title一般都是string类型
颜色一般是color 背景颜色是reference|color其实这种与运算表示取其一
想Gravity right|center_vertical 右垂直居中显示

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TopBar">
        <!--标题-->
        <attr name="title" format="string"></attr>
        <attr name="content" format="string"></attr>
        <!--尺寸-->
        <attr name="title_text_size" format="dimension"></attr>
        <attr name="title_text_color" format="color"></attr>
        <!--左边文本颜色 背景颜色 文本内容-->
        <attr name="leftTextColor" format="color"></attr>
        <attr name="leftBackground" format="reference|color"></attr>
        <attr name="leftText" format="string"></attr>
<!--右边文本颜色 背景颜色 文本内容-->
        <attr name="rightTextColor" format="color"></attr>
        <attr name="rightBackground" format="reference|color"></attr>
        <attr name="rightText" format="string"></attr>
    </declare-styleable>
</resources>

然后在TopBar自定义继承RelativeLayout使用Style/attrs里面的属性表苦熬标题的颜色字体大小背景以及对齐方式等

package com.zm.mytopbar.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.zm.mytopbar.R;

/**
 * Created by zhengmin on 2017/1/6.
 */
public class TopBar extends RelativeLayout {
    private Button leftBtn,rightBtn;
    private TextView tvTitle;
    private int leftTextColor;
    private Drawable leftBackground;
    private String leftText;

    private int rightTextColor;
    private Drawable rightBackground;
    private String rightText;
    private float titleTextSize;
    private int titleTextColor;
    private String title;
    private LayoutParams leftParams,rightParmas,tilteParams;
   private TopBarOnClickListener listener;
    private static final String TAG = "TopBar";
    public interface TopBarOnClickListener{
        public void leftOnClick();
        public void rightOnClick();

    }
    /**回调**/
    public void setOnTopBarListener(TopBarOnClickListener listener){
        this.listener=listener;
    }
    public TopBar(final Context context, AttributeSet attrs) {
        super(context, attrs);
        //通过context obtain获取styable里面对象的值
        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        //文本是refrence |color类型
       leftTextColor= ta.getColor(R.styleable.TopBar_leftTextColor, 0);
        //背景是drawable
        leftBackground=ta.getDrawable(R.styleable.TopBar_leftBackground);
        //文字是string类型
        leftText=ta.getString(R.styleable.TopBar_leftText);
        //文本是refrence |color类型
        rightTextColor= ta.getColor(R.styleable.TopBar_rightTextColor, 0);
        //背景是drawable
        rightBackground=ta.getDrawable(R.styleable.TopBar_rightBackground);
        //文字是string类型
        rightText=ta.getString(R.styleable.TopBar_rightText);
        //标题字体大小
        titleTextSize=ta.getDimension(R.styleable.TopBar_title_text_size, 0);
        //标题文字颜色
        titleTextColor=ta.getColor(R.styleable.TopBar_title_text_color, 0);
        //标题
        title=ta.getString(R.styleable.TopBar_title);
        //回收资源 由于缓存引起的错误
        ta.recycle();
        //获取引用的上下文对象
        leftBtn=new Button(context);
        rightBtn=new Button(context);
        tvTitle=new TextView(context);
        leftBtn.setText(leftText);
        leftBtn.setTextColor(leftTextColor);
        leftBtn.setBackground(leftBackground);

        rightBtn.setText(rightText);
        rightBtn.setTextColor(rightTextColor);
        rightBtn.setBackground(rightBackground);
        //设置文本标题
        tvTitle.setText(title);
        //设置标题的颜色
        tvTitle.setTextColor(titleTextColor);
        //设置字体的大小
        tvTitle.setTextSize(titleTextSize);
        //设置标题居中显示
        tvTitle.setGravity(Gravity.CENTER);
        //设置ViewGroup背景颜色
        setBackgroundColor(0xFFF59563);
        leftParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        //设置父容器居左对齐
        leftParams.addRule(ALIGN_PARENT_LEFT, TRUE);
        //将左button添加ViewGroup容器中
        addView(leftBtn, leftParams);
       rightParmas=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        //设置父容器居左对齐
      rightParmas.addRule(ALIGN_PARENT_RIGHT,TRUE);
        //将右button添加ViewGroup容器中
        addView(leftBtn,rightParmas);
        //标题栏
       tilteParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        //设置标题栏父容器居中对齐
        tilteParams.addRule(CENTER_IN_PARENT, TRUE);
        //将左button添加ViewGroup容器中
        addView(leftBtn,tilteParams);
        //点击左边
         leftBtn.setOnClickListener(new View.OnClickListener() {

             @Override
             public void onClick(View v) {
             //点击左标题
                 listener.leftOnClick();
                 Toast.makeText(context,"OnClick Left",Toast.LENGTH_LONG).show();

             }
         });
        //点击右边
        rightBtn.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                listener.rightOnClick();
                Toast.makeText(context,"OnClick Right",Toast.LENGTH_LONG).show();

            }
        });

}
    public void TopBarLeftisVisible(boolean flag){
        if(flag){
            //显示左标题
            leftBtn.setVisibility(View.VISIBLE);
        }else{
            //隐藏左标题
            leftBtn.setVisibility(View.GONE);
        }

    }

    public TopBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec=MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE>>2,MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

然后在主Activity中调用代码如下

package com.zm.mytopbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.zm.mytopbar.view.TopBar;

public class MainActivity extends AppCompatActivity{
    private TopBar topBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        topBar= (TopBar) findViewById(R.id.topBar);
        topBar.setOnTopBarListener(new TopBar.TopBarOnClickListener() {
            @Override
            public void leftOnClick() {
                Toast.makeText(MainActivity.this,"leftOnClick ",Toast.LENGTH_LONG).show();
            }

            @Override
            public void rightOnClick() {
                Toast.makeText(MainActivity.this," rightOnClick ",Toast.LENGTH_LONG).show();

            }
        });


    }


}

最后贴上布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custome="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@color/colorPrimary"
    android:padding="5dp"

    tools:context=".MainActivity">
    <com.zm.mytopbar.view.TopBar
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        custome:leftText="Back"
        custome:leftTextColor="#ffffff"
        custome:leftBackground="#666666"
        custome:rightText="More"
        custome:rightTextColor="#ffffff"
        custome:rightBackground="#666666"
        custome:title="消息"
        custome:title_text_size="10sp"
        custome:title_text_color="#123412"
        >

    </com.zm.mytopbar.view.TopBar>

</RelativeLayout>

需要注意的是你要使用自定义必须添加这个url

  xmlns:custome="http://schemas.android.com/apk/res-auto"

结束了很简单吧！转载请注明出处！[http://blog.csdn.net/qq_15950325/article/details/54145311]谢谢合作！另外可以加下我的Android群！大家一起开车哈！

KdanMin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android Material Design入门篇《一》

TopBar 主要包括左边文本文本颜色文本背景中间部分包括标题标题颜色右边包括文本文本颜色文本背景下面分别说下实现代码其实像TopBar很多地方都是可以复用因此可以抽象出来通过自定义View实现下面说下在res目录下新建一个attrs.xml文件相信大家只要看过源码的应该非常清楚，TopBar继承RelativeLayout的父类是ViewGroup这里简单画张图
复制链接

扫一扫