android 自定义控件(底部icon点击效果)

此片文章算是笔者之前写的一篇自定义控件的扩展,此片文章觉得吃力的可以先看前一篇,原文地址:

android 自定义view的使用(最佳demo——返回标题栏)


另外,笔者此篇中的功能一般会搭配fragment一起使用,笔者介绍fragment的地址如下:

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



效果:(源码在文章结尾)

android 自定义控件(底部icon点击效果)_第1张图片


主要实现的功能:

1、在java代码中动态设置底部控件的icon和text。(搭配fragment的时候特别方便)

2、text点击时会加粗

3、封装成自定义控件,更加方便。

(考虑到新手可能不易理解,笔者代码没有多加功能)


把底部icon做成自定义控件的优势:

1、搭配fragment或者viewpager使用的时候更加方便,避免写过多重复性代码。

2、代码维护起来更加方便,比如要修改底部icon中的字体,直接在自定义控件的layout中修改就可以。

3、提高代码的可阅读性。


代码截图:

android 自定义控件(底部icon点击效果)_第2张图片


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:




    

    

        


        

        >

        

        >

        

        
    



act_main_bottom_layout:




    
    


源码地址:http://download.csdn.net/detail/double2hao/9484652




你可能感兴趣的:(【Android】,Android,UI进阶)