Android topbar 实例

最新推荐文章于 2022-01-02 22:30:35 发布

yangzhichao888

最新推荐文章于 2022-01-02 22:30:35 发布

阅读量696

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： android 实例

本文链接：https://blog.youkuaiyun.com/yangzhichao888/article/details/70492327

Android 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了一种自定义Android应用顶部栏（Topbar）的方法，包括如何使用XML定义样式属性、Java代码实现布局和交互逻辑等。适用于希望增强应用程序用户体验的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   我学习Android的途径是学习网站，看里面的视频跟着做练习。确实很有作用，但是看完了之后电脑上只留了代码（而且没备份的话很容易丢掉），因此想了个办法，把代码发到博客上，这样既保存了代码而且随时可以对博客进行补充说明，大大方便自己啊。

话不多说现在开始正题:topbar我学自慕课网，我这里只给出老师的代码，具体实现的思路请点http://www.imooc.com/learn/247老师讲的真是太好了！
下面先给出代码结构：

这里写图片描述
下面贴出关键的代码文件
①.atts.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Topbar">
        <!--中间的文字-->
        <attr name="title" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color"/>
        <!--左边的按钮-->
        <attr name="leftBackground" format="reference|color"/><!--可以是资源文件，也可以是颜色的代码-->
        <attr name="leftTextColor" format="color"/>
        <attr name="leftText" format="string"/>
        <!--右边的按钮-->
        <attr name="rightBackground" format="reference|color"/><!--可以是资源文件，也可以是颜色的代码-->
        <attr name="rightTextColor" format="color"/>
        <attr name="rightText" format="string"/>
    </declare-styleable>

</resources>

②.activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout				//不一定非要RelativeLayout也可以是其他布局方式
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="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:context="com.example.yzc.demo_titlebar.MainActivity">//注意这块改成相关app的包名，类名
    <com.example.yzc.demo_titlebar.Topbar//注意这块改成相关app的包名，类名
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/topbar"
        
        custom:leftBackground="#ffff00"
        custom:leftText="返回"
        custom:leftTextColor="#ffffff"

        custom:rightBackground="#ffff00"
        custom:rightText="更多"
        custom:rightTextColor="#ffffff"

        custom:title="自定义标题"
        custom:titleTextColor="#000000"
        custom:titleTextSize="10sp"
        >
    </com.example.yzc.demo_titlebar.Topbar>
</RelativeLayout>

③.Topbar.java

package com.example.yzc.demo_titlebar;

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.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by yzc on 2017/4/21.
 */

public class Topbar extends RelativeLayout {
    private Button leftButton,rightButton;
    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,rightParams,titleParams;

    /*************************************************
     * 接口回调
     * 1.创建接口
     * 2.暴露方法给调用者
     * 3.
     **************************************************/
    //1.创建接口
    public interface topbarClickLister{
        public void leftClick();
        public void rightClick();

    }
    //2.暴露方法给调用者
    private topbarClickLister listener;//变量映射接口
    public void setOnTopbarClickLister(topbarClickLister listener){
        this.listener = listener;
    }
    /*************************************************
     * 接口回调
     **************************************************/
    public Topbar(final Context context, AttributeSet attrs) {
        super(context, attrs);
        //通过TypedArray  获取 我们在xml文件中自定义的 属性值
        TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Topbar);
        
        leftTextColor = ta.getColor(R.styleable.Topbar_leftTextColor,0);
        leftBackground  = ta.getDrawable(R.styleable.Topbar_leftBackground);
        leftText = ta.getString(R.styleable.Topbar_leftText);

        rightTextColor = ta.getColor(R.styleable.Topbar_rightTextColor,0);
        rightBackground  = ta.getDrawable(R.styleable.Topbar_rightBackground);
        rightText = ta.getString(R.styleable.Topbar_rightText);

        titleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize,0);
        titleTextColor = ta.getColor(R.styleable.Topbar_titleTextColor,0);
        title = ta.getString(R.styleable.Topbar_title);

        //回收1.避免浪费资源2.避免出现错误
        ta.recycle();

        //实例化Button,Textview
        leftButton = new Button(context);
        rightButton = new Button(context);
        tvTitle = new TextView(context);

        //把属性值赋给控件
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftBackground);
        leftButton.setText(leftText);

        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightBackground);
        rightButton.setText(rightText);

        tvTitle.setTextColor(titleTextColor);
        tvTitle.setTextSize(titleTextSize);
        tvTitle.setText(title);
        tvTitle.setGravity(Gravity.CENTER);//居中显示文字

        setBackgroundColor(0xfff59563);

        leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);

        rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);

        titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);
        //加入
        addView(leftButton,leftParams);
        addView(rightButton,rightParams);
        addView(tvTitle,titleParams);

        //最后设置点击事件
        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.leftClick();
            }
        });

        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.rightClick();
            }
        });
    }
    //拓展    是否显示左键
    public void setLeftIsvisable(boolean flag){
        if (flag){
            leftButton.setVisibility(View.VISIBLE);
        }else {
            leftButton.setVisibility(View.GONE);
        }
    }
}

④.MainActivity.java

package com.example.yzc.demo_titlebar;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Topbar topbar = (Topbar) findViewById(R.id.topbar);
        topbar.setOnTopbarClickLister(new Topbar.topbarClickLister() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this, "返回1", Toast.LENGTH_SHORT).show();

            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this, "更多1", Toast.LENGTH_SHORT).show();

            }
        });

        //显示左键
        topbar.setLeftIsvisable(true);
    }
}

至此简单的demo贴出，想要拓展最好看看慕课网的视频。