實(shí)例講解Android應(yīng)用中自定義組合控件的方法
自定義view大概可以分成:
- 繼承view
- 組合view
- 自己畫(huà)的view(用paint和canvas)
- 自定義viewgroup(widget)
最近又跟同學(xué)聊起來(lái)了,于是就準(zhǔn)備自己實(shí)現(xiàn)一個(gè)imagebutton來(lái)練練手。(最簡(jiǎn)單的了)以及后面一個(gè)把imageview與textview結(jié)合使用的案例。
ImageButton
要實(shí)現(xiàn)ImageButton最容易想到的不就是把button和imageview合在一起么。嗯,人容易就想到這是一個(gè)組合自定義view。可是如何把一個(gè)image放到button上呢,自然就是用一個(gè)FrameLayout把button和imageview包裹起來(lái),然后將這個(gè)layout當(dāng)作一個(gè)weidgt。把一個(gè)layout當(dāng)成一個(gè)控件我開(kāi)始不太理解。后來(lái)了解到一些東西。
補(bǔ)充知識(shí)點(diǎn)(安卓的頂層視圖)
在android里面,你的app界面的活動(dòng)的視圖并非是最頂級(jí)的視圖。大家應(yīng)該都知道viewtree。在安卓里面,最頂級(jí)的視圖是一個(gè)叫DecorView的東西。它包括你的狀態(tài)欄,標(biāo)題欄,以及你的活動(dòng)界面。而且這個(gè)活動(dòng)界面,安卓會(huì)自動(dòng)幫你提前弄進(jìn)去一個(gè)FrameLayout。可以這么理解吧,在安卓這個(gè)上帝的面前,你的activity就是放在他的framelayout的一個(gè)個(gè)view。上一張圖~
DecorView->LinearLayout(狀態(tài)欄和activity)->FrameLayout(activity)->你自己的acitivty視圖。
實(shí)例講解
好啦,回歸正題。我上代碼了。
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>
用一個(gè)framelayout把兩個(gè)控件裝起來(lái),然后組合。組合了之后我們就去自定義我們這個(gè)控件的屬性。button不用變對(duì)吧,用原生的就好了,就是需要有一個(gè)圖片的src這個(gè)屬性就好了。
在values目錄下的attrs.xml文件_
<?xml version="1.0" encoding="utf-8"?> <resources>在 <declare-styleable name="MyImageButton"> <attr name="Imagesrc" format="reference"/> </declare-styleable> </resources>
一般來(lái)說(shuō),declare-styleable標(biāo)簽的名字都是你的自定義控件的名字。attr就是你的自定義控件屬性。format是這個(gè)屬性的值的數(shù)據(jù)類(lèi)型。這里的reference表示引用。dimension表示的是dp或者sp的大小。還有一些可以自己去看看。定義好屬性,我們就開(kāi)始寫(xiě)控件了。
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); //獲得這個(gè)控件對(duì)應(yīng)的屬性。 TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.MyImageButton); try{ //獲得屬性值 resId = a.getResourceId(R.styleable.MyImageButton_Imagesrc, 0); }finally { //回收這個(gè)對(duì)象 a.recycle(); } if(resId != 0){ mImageView.setImageResource(resId); } } public void setImage(int resId){ mImageView.setImageResource(resId); } }
一般來(lái)說(shuō),繼承view(就這么說(shuō)吧,反正都是都是繼承view的),實(shí)現(xiàn)兩三個(gè)構(gòu)造函數(shù)就可以了。在第二個(gè)里面有一個(gè)attr,這就是傳進(jìn)來(lái)的屬性。如果resId不為默認(rèn)值,就表示用戶在xml里面?zhèn)魅肓诉@個(gè)屬性值,你也必須要寫(xiě)一個(gè)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>
效果圖
另一個(gè)實(shí)例
這里我們來(lái)看一個(gè)view組合控件的例子:
<string-array name="bao_type"> <item>測(cè)試1</item> <item>測(cè)試2</item> <item>測(cè)試3</item> <item>測(cè)試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之組合控件實(shí)現(xiàn)類(lèi)似電商app頂部欄
- Android自定義控件之組合控件學(xué)習(xí)筆記分享
- Android組合控件實(shí)現(xiàn)功能強(qiáng)大的自定義控件
- Android自定義組合控件之自定義下拉刷新和左滑刪除實(shí)例代碼
- Android中View自定義組合控件的基本編寫(xiě)方法
- 在Android開(kāi)發(fā)中使用自定義組合控件的例子
- 探究Android中ListView復(fù)用導(dǎo)致布局錯(cuò)亂的解決方案
- Android自定義控件之繼承ViewGroup創(chuàng)建新容器
- Android自定義控件之創(chuàng)建可復(fù)用的組合控件
相關(guān)文章
Android應(yīng)用更新之自動(dòng)檢測(cè)版本及自動(dòng)升級(jí)
這篇文章主要為大家詳細(xì)介紹了Android應(yīng)用更新之自動(dòng)檢測(cè)版本及自動(dòng)升級(jí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-09Android開(kāi)發(fā)實(shí)現(xiàn)Gallery畫(huà)廊效果的方法
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)Gallery畫(huà)廊效果的方法,結(jié)合具體實(shí)例形式分析了Android使用Gallery實(shí)現(xiàn)畫(huà)廊功能的具體操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-06-06android 通過(guò)向viewpage中添加listview來(lái)完成滑動(dòng)效果(類(lèi)似于qq滑動(dòng)界面)
android 通過(guò)向viewpage中添加listview來(lái)完成滑動(dòng)效果(類(lèi)似于qq滑動(dòng)界面),需要的朋友可以參考一下2013-05-05一次OOM問(wèn)題排查過(guò)程實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了一次OOM問(wèn)題排查過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Android給scrollView截圖超過(guò)屏幕大小形成長(zhǎng)圖
這篇文章主要為大家詳細(xì)介紹了Android給scrollView截圖超過(guò)屏幕大小形成長(zhǎng)圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android MediaPlayer音頻播放器封裝示例淺析
Android提供了許多方法來(lái)控制播放的音頻/視頻文件和流。其中該方法是通過(guò)一類(lèi)稱為MediaPlayer。Android是提供MediaPlayer類(lèi)訪問(wèn)內(nèi)置的媒體播放器的服務(wù),如播放音頻,視頻等為了使用MediaPlayer,我們要調(diào)用這個(gè)類(lèi)的靜態(tài)create()方法2023-04-04Android?Jetpack結(jié)構(gòu)運(yùn)用Compose實(shí)現(xiàn)微博長(zhǎng)按點(diǎn)贊彩虹效果
Compose在動(dòng)畫(huà)方面下足了功夫,提供了豐富的API。但也正由于API種類(lèi)繁多,如果想一氣兒學(xué)下來(lái),最終可能會(huì)消化不良,導(dǎo)致似懂非懂。結(jié)合例子學(xué)習(xí)是一個(gè)不錯(cuò)的方法,本文就帶大家邊學(xué)邊做,通過(guò)實(shí)現(xiàn)一個(gè)微博長(zhǎng)按點(diǎn)贊的動(dòng)畫(huà)效果,學(xué)習(xí)了解Compose動(dòng)畫(huà)的常見(jiàn)思路和開(kāi)發(fā)技巧2022-07-07Android 中ScrollView嵌套GridView,ListView的實(shí)例
這篇文章主要介紹了Android 中ScrollView嵌套GridView,ListView的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-03-03android調(diào)用web service(cxf)實(shí)例應(yīng)用詳解
Google為ndroid平臺(tái)開(kāi)發(fā)Web Service提供了支持,提供了Ksoap2-android相關(guān)架包接下來(lái)介紹android調(diào)用web service(cxf),感興趣的朋友可以了解下2013-01-01