android 自定義控制元件（底部icon點選效果）

許佳佳233發表於2016-04-08
Android控制元件

此片文章算是筆者之前寫的一篇自定義控制元件的擴充套件，此片文章覺得吃力的可以先看前一篇，原文地址：

android 自定義view的使用（最佳demo——返回標題欄）


另外，筆者此篇中的功能一般會搭配fragment一起使用，筆者介紹fragment的地址如下：

android viewpager+fragment做主介面(超容易理解的demo！)



效果：（原始碼在文章結尾）



主要實現的功能：

1、在java程式碼中動態設定底部控制元件的icon和text。（搭配fragment的時候特別方便）

2、text點選時會加粗

3、封裝成自定義控制元件，更加方便。

(考慮到新手可能不易理解，筆者程式碼沒有多加功能)


把底部icon做成自定義控制元件的優勢：

1、搭配fragment或者viewpager使用的時候更加方便，避免寫過多重複性程式碼。

2、程式碼維護起來更加方便，比如要修改底部icon中的字型，直接在自定義控制元件的layout中修改就可以。

3、提高程式碼的可閱讀性。


程式碼截圖：



MainActivity:

package com.example.double2.mybottomlayout;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity implements View.OnClickListener {

    BottomLayout blSituation;
    BottomLayout blMap;
    BottomLayout blDiscover;
    BottomLayout blMyData;

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

        //初始化控制元件
        initView();
    }

    private void initView() {
        initBottomLayout();

    }

    private void initBottomLayout() {
        blSituation = (BottomLayout) findViewById(R.id.bottom_icon_situation);
        blMap = (BottomLayout) findViewById(R.id.bottom_icon_map);
        blDiscover = (BottomLayout) findViewById(R.id.bottom_icon_discover);
        blMyData = (BottomLayout) findViewById(R.id.bottom_icon_my_data);

        blSituation.setNormalIcon(R.drawable.bottom_icon_situation_normal);
        blSituation.setFocusIcon(R.drawable.bottom_icon_situation_focus);
        blSituation.setIconText("Situation");
        blSituation.setFocused(true);
        blSituation.setOnClickListener(this);

        blMap.setNormalIcon(R.drawable.bottom_icon_map_normal);
        blMap.setFocusIcon(R.drawable.bottom_icon_map_focus);
        blMap.setIconText("Map");
        blMap.setFocused(false);
        blMap.setOnClickListener(this);

        blDiscover.setNormalIcon(R.drawable.bottom_icon_discover_normal);
        blDiscover.setFocusIcon(R.drawable.bottom_icon_discover_focus);
        blDiscover.setIconText("Discover");
        blDiscover.setFocused(false);
        blDiscover.setOnClickListener(this);

        blMyData.setNormalIcon(R.drawable.bottom_icon_my_data_normal);
        blMyData.setFocusIcon(R.drawable.bottom_icon_my_data_focus);
        blMyData.setIconText("MyData");
        blMyData.setFocused(false);
        blMyData.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bottom_icon_situation:
                blSituation.setFocused(true);
                blMap.setFocused(false);
                blDiscover.setFocused(false);
                blMyData.setFocused(false);
                break;
            case R.id.bottom_icon_map:
                blSituation.setFocused(false);
                blMap.setFocused(true);
                blDiscover.setFocused(false);
                blMyData.setFocused(false);
                break;
            case R.id.bottom_icon_discover:
                blSituation.setFocused(false);
                blMap.setFocused(false);
                blDiscover.setFocused(true);
                blMyData.setFocused(false);
                break;
            case R.id.bottom_icon_my_data:
                blSituation.setFocused(false);
                blMap.setFocused(false);
                blDiscover.setFocused(false);
                blMyData.setFocused(true);
                break;
        }
    }
}


BottomLayout: 

package com.example.double2.mybottomlayout;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by Double2號 on 2016/4/8.
 */
public class BottomLayout extends LinearLayout {

    private int normalIcon;
    private int focusIcon;
    private boolean isFocused=false;
    private ImageView ivIcon;
    private TextView tvText;

    public BottomLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        //載入佈局檔案，與setContentView()效果一樣
        LayoutInflater.from(context).inflate(R.layout.act_main_bottom_layout, this);
        ivIcon = (ImageView) findViewById(R.id.iv_main_bottom_icon);
        tvText = (TextView) findViewById(R.id.tv_main_bottom_text);
    }

    public void setNormalIcon(int normalIcon) {
        this.normalIcon = normalIcon;
        ivIcon.setImageResource(normalIcon);
    }

    public void setFocusIcon(int focusIcon) {
        this.focusIcon = focusIcon;
    }

    public void setIconText(String text) {
        tvText.setText(text);
    }

    public void setFocused(boolean isFocused) {
        //如果已經處在設定的狀態中，就不進行操作
        if (this.isFocused != isFocused) {
            this.isFocused = isFocused;
            if (isFocused) {
                //設定獲得焦點後的圖片
                //文字加粗
                ivIcon.setImageResource(focusIcon);
                tvText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
            } else {
                //設定獲得普通狀態的圖片
                //文字不加粗
                ivIcon.setImageResource(normalIcon);
                tvText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
            }
        }
    }

}

act_main: 

<?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="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="9" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <com.example.double2.mybottomlayout.BottomLayout
            android:id="@+id/bottom_icon_situation"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"></com.example.double2.mybottomlayout.BottomLayout>


        <com.example.double2.mybottomlayout.BottomLayout
            android:id="@+id/bottom_icon_map"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

        </com.example.double2.mybottomlayout.BottomLayout>>

        <com.example.double2.mybottomlayout.BottomLayout
            android:id="@+id/bottom_icon_discover"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

        </com.example.double2.mybottomlayout.BottomLayout>>

        <com.example.double2.mybottomlayout.BottomLayout
            android:id="@+id/bottom_icon_my_data"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

        </com.example.double2.mybottomlayout.BottomLayout>
    </LinearLayout>

</LinearLayout>

act_main_bottom_layout: 

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    android:gravity="center_horizontal"
    android:padding="5dp"
    android:background="#eae17b">

    <ImageView
        android:id="@+id/iv_main_bottom_icon"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        tools:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/tv_main_bottom_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="10sp"
        tools:text="icon"/>
</LinearLayout>


原始碼地址：http://download.csdn.net/detail/double2hao/9484652




相關文章