AndroidUI模板设计

原创 2015年07月07日 18:48:58

我们所用的所有控件都是直接或间接继承自View的,所用的所有布局都是直接或间接继承自ViewGroup的,View是Android中的一种最基本的UI组件,它可以在屏幕上绘制一块矩形区域,并能响应这块区域的各种事件,因此,我们使用各种控件其实就是在View的基础之上又添加了各自的功能。而ViewGroup则是一种特殊的View,它可以包含很多的子View和子ViewGroup,是一个放置控件和布局的容器。

  • 掌握如何自定义控件属性
  • 掌握如何动态创建组件
  • 掌握如何设计动态模板
  • 体会模板化开发的便利之处
  • 体会接口回调机制的思想

系统是怎么做的呢

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
</LinearLayout>
public class LinearLayout extends ViewGroup {}

可以看出LinearLayout继承自ViewGroup。

步骤

  • 设计需要的属性
  • 实现自定义View
  • 引用自定义View

下面我们来具体看一下实现:
首先我们定义attrs.xml文件来设计我们需要的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TopBar">
        <attr name="titleContent" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="leftBackground" format="reference|color"/>
        <attr name="leftText" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightText" format="string"/>
    </declare-styleable>
</resources>

format:表示我们在布局文件中引用属性时所需要数据的类型。

接下来我们来实现自定义的View:

package com.timosang.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.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by Administrator on 2015/7/7 0007.
 */
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 titleContext;

    //设置布局参数
    private LayoutParams leftParams, rightParams, titleParams;

    private topbarClickListener listener;
    //定义接口回调

    public interface topbarClickListener {
        public void leftClick();

        public void rightCLick();

    }

    public void setOnTopbarClickListener(topbarClickListener listener) {
        this.listener = listener;
    }

    public TopBar(final Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取我们定义的属性

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

        titleContext = ta.getString(R.styleable.TopBar_titleContent);
        titleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 0);
        titleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0);

        //注意要回收TypedArray

        ta.recycle();
        //实例化控件
        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.setText(titleContext);
        tvTitle.setTextColor(titleTextColor);
        tvTitle.setTextSize(titleTextSize);
        tvTitle.setGravity(Gravity.CENTER);

        setBackgroundColor(0xFFF09563);

        leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        //把leftButton以leftParams的形式添加到ViewGroup
        addView(leftButton, leftParams);

        rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        //把rightButton以rightParams的形式添加到ViewGroup
        addView(rightButton, rightParams);

        titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT);

        addView(tvTitle, titleParams);

        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //Toast.makeText(context, "left Button", Toast.LENGTH_SHORT).show();
                listener.leftClick();
            }
        });
        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //Toast.makeText(context, "right Button", Toast.LENGTH_SHORT).show();
                listener.rightCLick();
            }
        });


    }

    public void setLeftIsVisiable(boolean flag) {
        if (flag){
            leftButton.setVisibility(View.VISIBLE);
        }else {
            leftButton.setVisibility(View.GONE);
        }
    }
}



引用我们定义的View:

<LinearLayout 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">

    <com.timosang.titlebar.TopBar
        android:id="@+id/top_bar"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        custom:leftText="back"
        custom:leftBackground="#111111"
        custom:leftTextColor="#FFFFFF"
        custom:rightText="more"
        custom:rightBackground="#111111"
        custom:rightTextColor="#FFFFFF"
        custom:titleContent="自定义标题"
        custom:titleTextColor="#FFFFFF"
        custom:titleTextSize="10sp">

    </com.timosang.titlebar.TopBar>
</LinearLayout>

Activity的实现:

package com.timosang.titlebar;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        TopBar topBar = (TopBar) findViewById(R.id.top_bar);
        topBar.setOnTopbarClickListener(new TopBar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this, "left Button", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightCLick() {
                Toast.makeText(MainActivity.this, "right Button", Toast.LENGTH_SHORT).show();
            }
        });
        topBar.setLeftIsVisiable(false);


    }


}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AndroidUI界面模板

  • 2017-05-17 21:48
  • 157KB
  • 下载

AndroidUI设计英文版

  • 2011-07-25 08:34
  • 3.63MB
  • 下载

AndroidUI设计 之 图片浏览器

图片浏览器效果图 :  源码下载地址 :  -- CSDN : http://download.csdn.net/detail/han1202012/6875083 -- GitHub : ht...

androidUI设计技巧

  • 2012-11-18 20:17
  • 399KB
  • 下载

AndroidUI设计

  • 2013-12-20 21:10
  • 4.31MB
  • 下载

【Android 应用开发】AndroidUI设计 之 图片浏览器

详细分析图片与ImageView各种填充方式适配. 制作一个简易图片浏览器. 图片无限循环前后翻页, 图片的放大缩小, 图片的左右旋转, 图片透明度改变

AndroidUI设计技巧

  • 2013-08-30 13:04
  • 399KB
  • 下载

androidUI设计秘籍

  • 2011-07-05 14:56
  • 16KB
  • 下载

【Android开发】android最全的颜色对应的16进制代码(androidUI设计必备)

颜色代码大全  AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。       ffff...

AndroidUI设计技巧

  • 2016-09-02 13:58
  • 399KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)