實例講解Android應(yīng)用中自定義組合控件的方法
更新時間：2016年04月15日 14:45:22 作者：Zane96
這篇文章主要介紹了實例講解Android應(yīng)用中自定義組合控件的方法,通過例子講解了view組合控件及自定義屬性的用法,需要的朋友可以參考下
自定義view大概可以分成：
- 繼承view
- 組合view
- 自己畫的view（用paint和canvas）
- 自定義viewgroup（widget）
最近又跟同學(xué)聊起來了，于是就準(zhǔn)備自己實現(xiàn)一個imagebutton來練練手。（最簡單的了）以及后面一個把imageview與textview結(jié)合使用的案例。
ImageButton
要實現(xiàn)ImageButton最容易想到的不就是把button和imageview合在一起么。嗯，人容易就想到這是一個組合自定義view。可是如何把一個image放到button上呢，自然就是用一個FrameLayout把button和imageview包裹起來，然后將這個layout當(dāng)作一個weidgt。把一個layout當(dāng)成一個控件我開始不太理解。后來了解到一些東西。
補充知識點（安卓的頂層視圖）
在android里面，你的app界面的活動的視圖并非是最頂級的視圖。大家應(yīng)該都知道viewtree。在安卓里面，最頂級的視圖是一個叫DecorView的東西。它包括你的狀態(tài)欄，標(biāo)題欄，以及你的活動界面。而且這個活動界面，安卓會自動幫你提前弄進(jìn)去一個FrameLayout。可以這么理解吧，在安卓這個上帝的面前，你的activity就是放在他的framelayout的一個個view。上一張圖～
DecorView->LinearLayout(狀態(tài)欄和activity)->FrameLayout(activity)->你自己的acitivty視圖。
實例講解
好啦，回歸正題。我上代碼了。
myimagebutton_layout.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/button_imagebutton" /> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/imageview_button" /> </FrameLayout>
用一個framelayout把兩個控件裝起來，然后組合。組合了之后我們就去自定義我們這個控件的屬性。button不用變對吧，用原生的就好了，就是需要有一個圖片的src這個屬性就好了。
在values目錄下的attrs.xml文件_
<?xml version="1.0" encoding="utf-8"?>
<resources>在
<declare-styleable name="MyImageButton">
<attr name="Imagesrc" format="reference"/>
</declare-styleable>
</resources>
一般來說，declare-styleable標(biāo)簽的名字都是你的自定義控件的名字。attr就是你的自定義控件屬性。format是這個屬性的值的數(shù)據(jù)類型。這里的reference表示引用。dimension表示的是dp或者sp的大小。還有一些可以自己去看看。定義好屬性，我們就開始寫控件了。
MyImageButton.java
public class MyImageButton2 extends FrameLayout{
ImageView mImageView;
Button mButton;
int resId;
public MyImageButton2(Context context) {
super(context);
}
public MyImageButton2(Context context, AttributeSet attrs) {
super(context, attrs);
//導(dǎo)入布局
LayoutInflater.from(context).inflate(R.layout.myimagebutton_layout, this);
mImageView＝(ImageView)findViewById(R.id.imageview_button);
mButton = (Button) findViewById(R.id.button_imagebutton);
//獲得這個控件對應(yīng)的屬性。
TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.MyImageButton);
try{
//獲得屬性值
resId = a.getResourceId(R.styleable.MyImageButton_Imagesrc, 0);
}finally {
//回收這個對象
a.recycle();
}
if(resId != 0){
mImageView.setImageResource(resId);
}
}
public void setImage(int resId){
mImageView.setImageResource(resId);
}
}
一般來說，繼承view（就這么說吧，反正都是都是繼承view的），實現(xiàn)兩三個構(gòu)造函數(shù)就可以了。在第二個里面有一個attr，這就是傳進(jìn)來的屬性。如果resId不為默認(rèn)值，就表示用戶在xml里面?zhèn)魅肓诉@個屬性值，你也必須要寫一個set方法，讓用戶可以在java代碼中去改變屬性值。
test.myimagebutton.layout.xml_
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.think.testview.customview.MyImageButton2
xmlns:pt = "http://schemas.android.com/apk/res/com.example.think.testview"
android:layout_height="100dp"
android:layout_width="match_parent"
pt:Imagesrc = "@drawable/ic_launcher"
/>
</LinearLayout>
效果圖
另一個實例
這里我們來看一個view組合控件的例子：
<string-array name="bao_type"> <item>測試1</item> <item>測試2</item> <item>測試3</item> <item>測試4</item> </string-array>
<?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:background="@color/gray_common_background"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/txt_viewpage_bar1"
style="@style/style_common_pagebar"
android:textColor="@color/theme_red" />
<TextView
android:id="@+id/txt_viewpage_bar2"
style="@style/style_common_pagebar" />
<TextView
android:id="@+id/txt_viewpage_bar3"
style="@style/style_common_pagebar" />
<TextView
android:id="@+id/txt_viewpage_bar4"
style="@style/style_common_pagebar" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="@+id/view_viewpage_bar1"
style="@style/style_common_pagebar_view" />
<View
android:id="@+id/view_viewpage_bar2"
style="@style/style_common_pagebar_view" />
<View
android:id="@+id/view_viewpage_bar3"
style="@style/style_common_pagebar_view" />
<View
android:id="@+id/view_viewpage_bar4"
style="@style/style_common_pagebar_view" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/common_viewpage_buttom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
public interface SlbPageViewOnPageChangeListener {
void onPageSelected(int position);
void onPageScrollStateChanged(int state);
}
public class SlbPageViewBar extends LinearLayout {
private TextView[] mTotalTxtViews;
private View[] mTotalViews;
private List<TextView> mTxtViews;
private List<View> mViews;
private ViewPager mViewPager;
private SlbPageViewOnPageChangeListener mSlbPageViewOnPageChangeListener;
public SlbPageViewBar(Context context, AttributeSet attrs) {
super(context, attrs);
mTotalTxtViews = new TextView[4];
mTotalViews = new View[4];
mTxtViews = new ArrayList<>();
mViews = new ArrayList<>();
initView();
}
private void initView() {
View.inflate(getContext(), R.layout.layout_common_top_pageview_bar, this);
mViewPager = (ViewPager) findViewById(R.id.common_viewpage_buttom);
mTotalTxtViews[0] = (TextView) findViewById(R.id.txt_viewpage_bar1);
mTotalTxtViews[1] = (TextView) findViewById(R.id.txt_viewpage_bar2);
mTotalTxtViews[2] = (TextView) findViewById(R.id.txt_viewpage_bar3);
mTotalTxtViews[3] = (TextView) findViewById(R.id.txt_viewpage_bar4);
mTotalViews[0] = findViewById(R.id.view_viewpage_bar1);
mTotalViews[1] = findViewById(R.id.view_viewpage_bar2);
mTotalViews[2] = findViewById(R.id.view_viewpage_bar3);
mTotalViews[3] = findViewById(R.id.view_viewpage_bar4);
}
/**
* @param title 標(biāo)題名稱數(shù)組
*/
public void setTitleView(String[] title) {
int legth = title.length > 4 ? 4 : title.length;
for (int i = 0; i < legth; i++) {
mTotalTxtViews[i].setText(title[i]);
mTotalTxtViews[i].setVisibility(View.VISIBLE);
mTotalViews[i].setVisibility(View.INVISIBLE);
mTotalTxtViews[i].setOnClickListener(new SlbTextViewOnLister(i));
mTxtViews.add(mTotalTxtViews[i]);
mViews.add(mTotalViews[i]);
}
mTotalViews[0].setVisibility(View.VISIBLE);
mViewPager.setOnPageChangeListener(mOnButtomPageChangeListener);
}
public ViewPager getViewPager(){
return mViewPager;
}
public void setSlbPageViewOnPageChangeListener(SlbPageViewOnPageChangeListener slbPageViewOnPageChangeListener) {
this.mSlbPageViewOnPageChangeListener = slbPageViewOnPageChangeListener;
}
private void changeViewBg(int textViewId, int viewId) {
for (View view : mViews) {
if (viewId == view.getId()) {
view.setVisibility(View.VISIBLE);
} else {
view.setVisibility(View.INVISIBLE);
}
}
for (TextView view : mTxtViews) {
if (textViewId == view.getId()) {
view.setTextColor(getResources().getColor(R.color.theme_red));
} else {
view.setTextColor(getResources().getColor(R.color.black_normal_text_33333));
}
}
}
class SlbTextViewOnLister implements OnClickListener {
private int mItem;
public SlbTextViewOnLister(int item) {
this.mItem = item;
}
@Override
public void onClick(View v) {
mViewPager.setCurrentItem(mItem);
}
}
private ViewPager.OnPageChangeListener mOnButtomPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
changeViewBg(R.id.txt_viewpage_bar1, R.id.view_viewpage_bar1);
break;
case 1:
changeViewBg(R.id.txt_viewpage_bar2, R.id.view_viewpage_bar2);
break;
case 2:
changeViewBg(R.id.txt_viewpage_bar3, R.id.view_viewpage_bar3);
break;
case 3:
changeViewBg(R.id.txt_viewpage_bar4, R.id.view_viewpage_bar4);
break;
}
if (mSlbPageViewOnPageChangeListener != null)
mSlbPageViewOnPageChangeListener.onPageSelected(position);
}
@Override
public void onPageScrollStateChanged(int state) {
if (mSlbPageViewOnPageChangeListener != null)
mSlbPageViewOnPageChangeListener.onPageScrollStateChanged(state);
}
};
}
public class CommonViewpageAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments;
private String [] mTitles;
public CommonViewpageAdapter(FragmentManager fm, List<Fragment> fragments, String [] titles) {
super(fm);
mFragments = fragments;
mTitles = titles;
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object);
}
}
<com.slfinance.app.slb.common.ui.view.SlbPageViewBar
android:id="@+id/slbpv_buy_huoqibao_SlbPageViewBarshow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
private void initButtomPageFragment(SlbPageViewBar slbPageViewBar) {
List<Fragment> fragmentList = new ArrayList<>();
Test1Fragment test1Fragment = new Test1Fragment();
Test2Fragment test2Fragment = new Test2Fragment();
Test3Fragment test3Fragment = new Test3Fragment();
Test4Fragment test4Fragment = new Test4Fragment();
fragmentList.add(test1Fragment);
fragmentList.add(test2Fragment);
fragmentList.add(test3Fragment);
fragmentList.add(test4Fragment);
String[] titles = getResources().getStringArray(R.array.buy_huoqi_bao_zanquan_detail);
slbPageViewBar.setTitleView(titles);
CommonViewpageAdapter viewPagerAdapter = new CommonViewpageAdapter(
getSupportFragmentManager(), fragmentList, titles);
mButtomPageView.setAdapter(viewPagerAdapter);
mButtomPageView.setOffscreenPageLimit(3);
mButtomPageView.setCurrentItem(0);
}
您可能感興趣的文章:
- Android自定義控件之自定義組合控件（三）
- Android自定義View之組合控件實現(xiàn)類似電商app頂部欄
- Android自定義控件之組合控件學(xué)習(xí)筆記分享
- Android組合控件實現(xiàn)功能強大的自定義控件
- Android自定義組合控件之自定義下拉刷新和左滑刪除實例代碼
- Android中View自定義組合控件的基本編寫方法
- 在Android開發(fā)中使用自定義組合控件的例子
- 探究Android中ListView復(fù)用導(dǎo)致布局錯亂的解決方案
- Android自定義控件之繼承ViewGroup創(chuàng)建新容器
- Android自定義控件之創(chuàng)建可復(fù)用的組合控件
相關(guān)文章
這篇文章主要介紹了Android實現(xiàn)模仿UCweb菜單效果的方法,較為詳細(xì)的分析了Android模仿UCweb菜單效果的頁面布局及功能實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
Android 使用 SharedPreferences 保存少量數(shù)據(jù)的實現(xiàn)代碼
這篇文章主要介紹了Android 使用 SharedPreferences 保存少量數(shù)據(jù)的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-04-04
Android項目仿UC瀏覽器和360手機衛(wèi)士消息常駐欄（通知欄）
本篇文章主要介紹了Android項目仿UC瀏覽器和360手機衛(wèi)士消息常駐欄（通知欄），可以仿照360的通知欄，有興趣的可以了解一下。2016-11-11
這篇文章主要為大家詳細(xì)介紹了Android RecyclerView滾動定位的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Android底部導(dǎo)航組件BottomNavigationView
這篇文章主要介紹了Android底部導(dǎo)航組件BottomNavigationView，BottomNavigationView是相當(dāng)于一個導(dǎo)航的標(biāo)簽，但是它的形式就是像QQ微信之類的界面，至于寫出后怎樣綁定這三個界面，就得用Fragment，寫這三個頁面的布局2023-03-03
Android編程開發(fā)之EditText實現(xiàn)輸入QQ表情圖像的方法
這篇文章主要介紹了Android編程開發(fā)之EditText實現(xiàn)輸入QQ表情圖像的方法,涉及Android多媒體文件及EditText的相關(guān)操作技巧,需要的朋友可以參考下2015-12-12
今天小編就為大家分享一篇Android 使用地圖時的權(quán)限請求方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-07-07
Android AlertDialog自定義樣式實現(xiàn)代碼
這篇文章主要介紹了Android AlertDialog自定義樣式實現(xiàn)代碼的相關(guān)資料,這里提供了實例代碼，一個簡單示例，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了Android如何實現(xiàn)接收和發(fā)送短信，具有一定的實用性，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家介紹了Android?Activity共享元素動畫示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09