AndroidUI模板设计

我们所用的所有控件都是直接或间接继承自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);


    }


}
阅读更多
文章标签: android开发
个人分类: Android基础
想对作者说点什么? 我来说一句

AndroidUI设计技巧.rar

2011年03月25日 371KB 下载

Android各种原生UI模板 HoloEverywhere

2014年09月22日 3.83MB 下载

精通ANDROID UI设计 pdf

2017年09月26日 89.85MB 下载

androidUI设计与网络开发

2010年12月05日 5.42MB 下载

android UI界面设计

2011年11月03日 16KB 下载

androidUI设计

2012年01月14日 862KB 下载

没有更多推荐了,返回首页

不良信息举报

AndroidUI模板设计

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭