码迷,mamicode.com
首页 > 移动开发 > 详细

Android开发学习之路--UI之自定义布局和控件

时间:2016-02-09 17:27:24      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:

    新的一年已经开始了,今天已经是初二了,两天没有学习了,还是要来继续学习下。一般手机的title都是actionbar,就像iphone一样可以后退,可以编辑。这里自定义布局就来实现下这个功能,首先准备下三张图片,一张用来当作背景,两张分别表示后退和编辑。新建工程UICostomViewsTest,然后自动创建工程后,新建title.xml,编写代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/title_bg">

    <Button
        android:id="@+id/title_back"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dip"
        android:background="@drawable/back_bg" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Title Text"
        android:textColor="#fff"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/title_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dip"
        android:background="@drawable/edit_bg"/>

</LinearLayout>

    效果如下:

技术分享

    一般来说会有很多地方用到这个title,那么如果每个页面都要写这一段代码,那么代码也太冗余了,这里可以使用include。再main_activity.xml里面添加该title,然后再搞一个textview和button。代码编写如下:

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

    <include layout="@layout/title" />

    <TextView
        android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:textSize="24dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button1"/>

</TableLayout>

    以上只要include 刚编写的title就可以了,这里主要用到了linear layout,所以这里用了tableLayout。效果如下:

技术分享

    虽然上面的title已经ok了,但是我们要实现back,edit的功能,需要响应事件才可以,那么这里再实现自己的控件。编写TitleLayout,代码如下:

package com.example.jared.uicustomviewstest;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by jared on 16/2/9.
 */
public class TitleLayout extends LinearLayout {

    private Button back_button;
    private Button edit_button;
    private TextView title_text;

    public class MyOnclickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.title_back:
                    Toast.makeText(getContext(), "You clicked back button!",
                            Toast.LENGTH_SHORT).show();
                    break;
                case R.id.title_edit:
                    Toast.makeText(getContext(), "You clicked edit button!",
                            Toast.LENGTH_SHORT).show();
                    break;
                default:
                    break;
            }
        }
    }

    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title, this);

        back_button = (Button)findViewById(R.id.title_back);
        edit_button = (Button)findViewById(R.id.title_edit);
        title_text = (TextView)findViewById(R.id.title_text);

        back_button.setOnClickListener(new MyOnclickListener());
        edit_button.setOnClickListener(new MyOnclickListener());
    }
}

    TitleLayout实现构造继承linearLayout,并在构造函数中实现了back,edit等的功能。触发按键可以打印些信息。

    修改activity_main的xml,如下:

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

    <com.example.jared.uicustomviewstest.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

    <TextView
        android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:textSize="24dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:textAllCaps="false" />

</TableLayout>

    和一般的控件使用方法一样,这里是com.example.jared.uicuctomviewstest.TitleLayout,运行效果如下:有点丑,UI下次再好好改改。


技术分享        技术分享

    基本上自定义控件差不多就这些了。

Android开发学习之路--UI之自定义布局和控件

标签:

原文地址:http://blog.csdn.net/eastmoon502136/article/details/50646496

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!