android 自定義控制元件(底部icon點選效果)
此片文章算是筆者之前寫的一篇自定義控制元件的擴充套件,此片文章覺得吃力的可以先看前一篇,原文地址:
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;
}
}
}
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
相關文章
- 自定義控制元件 --- 電池icon控制元件
- Android 自定義View 點贊效果AndroidView
- iOS自定義控制元件:精簡的底部彈框iOS控制元件
- 【Android】自定義樹形控制元件Android控制元件
- Android Button 點選效果Android
- 在Flutter中使用自定義IconFlutter
- Android自定義View 雷達掃描效果AndroidView
- Android 控制元件架構與自定義控制元件詳解Android控制元件架構
- Android自定義View--翻書控制元件(一)AndroidView控制元件
- Android自定義控制元件(神級)+MediaRecoder錄音Android控制元件
- Android自定義多宮格解鎖控制元件Android控制元件
- Android自定義控制元件 帶文字提示的SeekBarAndroid控制元件
- iOS 自定義日曆(日期選擇)控制元件iOS控制元件
- iOS自定義控制元件:自定義TableView、CollectionView空資料佔點陣圖iOS控制元件View
- Android SeekBar 自定義thumb,thumb旋轉動畫效果Android動畫
- Android自定義View教你一步一步實現即刻點贊效果AndroidView
- 【Android初級】如何實現一個有動畫效果的自定義下拉選單Android動畫
- 自定義控制元件ViewPager控制元件Viewpager
- 自定義Switch控制元件控制元件
- Android自定義View之定點寫文字AndroidView
- Android - 控制元件抖動效果Android控制元件
- 4. 自定義控制元件(4) --- 自定義屬性控制元件
- Android自定義View之區塊選擇器AndroidView
- Android自定義控制元件(高手級)--JOJO同款能力分析圖Android控制元件
- Android自定義控制元件(高手級)–JOJO同款能力分析圖Android控制元件
- 從Android到ReactNative開發(三、自定義原生控制元件支援)AndroidReact控制元件
- Android開發之自定義隨機驗證碼控制元件Android隨機控制元件
- winform 自定義容器控制元件ORM控制元件
- WPF Blend 自定義控制元件控制元件
- Flutter 之 自定義控制元件Flutter控制元件
- iOS自定義控制元件 SlideriOS控制元件IDE
- iOS自定義控制元件 AlertViewiOS控制元件View
- iOS自定義控制元件 SegmentiOS控制元件
- 小程式中 icon 顏色自定義解決方案
- android短視訊開發,自定義下拉選單Android
- Android自定義控制元件之區域性圖片放大鏡–BiggerViewAndroid控制元件View
- Android自定義控制元件之區域性圖片放大鏡--BiggerViewAndroid控制元件View
- 從 Android 到 React Native 開發(三、自定義原生控制元件支援)AndroidReact Native控制元件
- VirtualView Android 實現詳解(三)—— 新增一個自定義控制元件ViewAndroid控制元件