欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

实例讲解Android应用中自定义组合控件的方法

程序员文章站 2024-03-01 09:10:04
自定义view大概可以分成: 继承view 组合view 自己画的view(用paint和canvas) 自定义viewgroup(widget...

自定义view大概可以分成:

  • 继承view
  • 组合view
  • 自己画的view(用paint和canvas)
  • 自定义viewgroup(widget)

最近又跟同学聊起来了,于是就准备自己实现一个imagebutton来练练手。(最简单的了)以及后面一个把imageview与textview结合使用的案例。

imagebutton
要实现imagebutton最容易想到的不就是把button和imageview合在一起么。嗯,人容易就想到这是一个组合自定义view。可是如何把一个image放到button上呢,自然就是用一个framelayout把button和imageview包裹起来,然后将这个layout当作一个weidgt。把一个layout当成一个控件我开始不太理解。后来了解到一些东西。

补充知识点(安卓的顶层视图)
在android里面,你的app界面的活动的视图并非是最*的视图。大家应该都知道viewtree。在安卓里面,最*的视图是一个叫decorview的东西。它包括你的状态栏,标题栏,以及你的活动界面。而且这个活动界面,安卓会自动帮你提前弄进去一个framelayout。可以这么理解吧,在安卓这个上帝的面前,你的activity就是放在他的framelayout的一个个view。上一张图~

实例讲解Android应用中自定义组合控件的方法

decorview->linearlayout(状态栏和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标签的名字都是你的自定义控件的名字。attr就是你的自定义控件属性。format是这个属性的值的数据类型。这里的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);
    //导入布局
    layoutinflater.from(context).inflate(r.layout.myimagebutton_layout, this);

   mimageview=(imageview)findviewbyid(r.id.imageview_button);

   mbutton = (button) findviewbyid(r.id.button_imagebutton);
    //获得这个控件对应的属性。
   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的),实现两三个构造函数就可以了。在第二个里面有一个attr,这就是传进来的属性。如果resid不为默认值,就表示用户在xml里面传入了这个属性值,你也必须要写一个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>

效果图

实例讲解Android应用中自定义组合控件的方法

另一个实例

这里我们来看一个view组合控件的例子:

实例讲解Android应用中自定义组合控件的方法

<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 标题名称数组 
   */ 
 
  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); 
}