android自定义伸缩框（展开效果）

最新推荐文章于 2024-07-21 23:44:56 发布

代码码一代

最新推荐文章于 2024-07-21 23:44:56 发布

阅读量4.8k

点赞数 5

文章标签：自定义伸缩框自定义控件 android自定义伸缩框展开效果展开效果

本文链接：https://blog.csdn.net/ccc920123/article/details/46708973

版权

</pre>在android中往往在很多时候用到伸缩框也就是展开效果，或者说是折叠效果，当然在Android中系统也有个类似QQ好友的方式的View   “ExpandableListView”它的用法也很简单先看看效果<p></p><p style="text-align:center"><img src="https://img-blog.csdn.net/20150701125954130?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2NjOTIwMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p style="text-align:left">ExpandableListView 的用法我们也先来简单的介绍一下 ExpandableListView的用法和ListView相识，都是需要适配器，在这里就不直接自定义适配器了，我们直接采用系统的适配器，把代码给大家呈上：这里主要是主界面代码</p><pre name="code" class="java">private ExpandableListView mExpandListView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		mExpandListView = (ExpandableListView) findViewById(R.id.expandlistview);
		
		List<HashMap<String,String>> groupData = new ArrayList<HashMap<String,String>>();
		HashMap<String,String> map = new HashMap<String, String>();
		map.put("GROUP", "我的好友");
		groupData.add(map);
		map = new HashMap<String, String>();
		map.put("GROUP", "我的家人");
		groupData.add(map);
		map = new HashMap<String, String>();
		map.put("GROUP", "陌生人");
		groupData.add(map);
		
		//childData.size()-->一共有多少个分组
		//childData.get(i).size()-->每个分组有多少个人
		List<List<HashMap<String, String>>> childData = new ArrayList<List<HashMap<String,String>>>();
		//添加第一组数据
		List<HashMap<String,String>> childList = new ArrayList<HashMap<String,String>>();
		HashMap<String,String> childMap = new HashMap<String, String>();
		childMap.put("NAME", "zhangsan");
		childList.add(childMap);
		childMap = new HashMap<String, String>();
		childMap.put("NAME", "lisi");
		childList.add(childMap);
		childData.add(childList);
		//添加第二组数据
		childList = new ArrayList<HashMap<String,String>>();
		childMap = new HashMap<String, String>();
		childMap.put("NAME", "wangwu");
		childList.add(childMap);
		childMap = new HashMap<String, String>();
		childMap.put("NAME", "zhaoliu");
		childList.add(childMap);
		childData.add(childList);
		//添加第三组数据
		childList = new ArrayList<HashMap<String,String>>();
		childMap = new HashMap<String, String>();
		childMap.put("NAME", "zhuqi");
		childList.add(childMap);
		childMap = new HashMap<String, String>();
		childMap.put("NAME", "sunba");
		childList.add(childMap);
		childData.add(childList);
		
		//1.Context 上下文
		//2.groupData 组的数据 List<? extends Map<String, ?>> 
		//3.groupLayout 组显示的布局的id
		//4.groupFrom groupData --> map --> key
		//5.groupTo 需要匹配内容的控件的id集合
		//6.childData 二级目录的数据 List<List<Map<String, ?>>> 
		//7.childLayout 二级目录的布局
		//8.childFrom
		//9.childTo
		SimpleExpandableListAdapter adapter = new SimpleExpandableListAdapter(
				this, groupData, android.R.layout.simple_list_item_1, 
				new String[]{"GROUP"}, new int[]{android.R.id.text1}, 
				childData, 
				android.R.layout.simple_list_item_1, new String[]{"NAME"}, new int[]{android.R.id.text1});
		//设置适配器
		mExpandListView.setAdapter(adapter);
	}

大家看到代码是否是比较简单？这个是不是今天主要讲的我们今天主要讲的先看看效果

在这里我们就直接贴出实现的代码：工具类InfoItemBar：

/**
 * 
 * @Description 展开与收缩框工具定义类
 * @Create Time 2015-6-30
 */
public class InfoItemBar extends LinearLayout { 
	
	private LinearLayout mLinearLayout,mitembar;
	private ImageView Image;
	
	InfoItemBar(Context mContext,String title)
	{
		super(mContext);
		View view=LayoutInflater.from(mContext).inflate(R.layout.item_bar, this);
		this.mLinearLayout = (LinearLayout)view.findViewById(R.id.itemBar_content);
		this.mitembar=(LinearLayout) view.findViewById(R.id.itembar);
		this.Image = (ImageView) view.findViewById(R.id.item_img_title);
		TextView titleTextView = (TextView) view.findViewById(R.id.itemBar_title);
		titleTextView.setText(title + " :");

		mitembar.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if (mLinearLayout.getVisibility() == View.GONE) {
					mLinearLayout.setVisibility(View.VISIBLE);
					Image.setImageResource(R.drawable.item_pressed);
				} else {
					mLinearLayout.setVisibility(View.GONE);
					Image.setImageResource(R.drawable.item_unpressed);
				}
			}

		});
	}
	/**
	 * 设置 羡项目集 是否展开
	 * 
	 * @param isShow
	 */
	public void setShow(boolean isShow) {
		if (isShow) {
			mLinearLayout.setVisibility(View.VISIBLE);
			Image.setImageResource(R.drawable.item_pressed);
		} else {
			mLinearLayout.setVisibility(View.GONE);
			Image.setImageResource(R.drawable.item_unpressed);
		}
	}
	/**
	 * 添加 infoItem项目
	 * 
	 * @param item
	 */
	public void addView(View item) {
		
		mLinearLayout.addView(item);
		
	}

	
}

我们从代码中可以看出其时我们就是运用了显示于不显示来控制着伸缩

InfoItemBar 这是我们定义的类，既然定义的类都写好了，那么只需要在页面显示了，

MainActvity中

</pre><pre name="code" class="java">protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mLinearLayout=(LinearLayout) findViewById(R.id.mianliner);
		View view=LayoutInflater.from(MainActivity.this).inflate(R.layout.main_bar, null);
                InfoItemBar mbar=new InfoItemBar(MainActivity.this, "点击展开");
		mbar.addView(view);
		mbar.setShow(true);
		mLinearLayout.addView(mbar);

布局文件.xml

main_activity.xml

<RelativeLayout 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:background="@android:color/darker_gray"
 >
          <LinearLayout
            android:id="@+id/mianliner"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:orientation="vertical"
             >
        </LinearLayout>

         
          
</RelativeLayout>

item_bar.xml 点击展开的父文件

<?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="@drawable/bg_carlogin_itembar"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/itembar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:padding="5dp" >

        
        <TextView
            android:id="@+id/itemBar_title"
            android:layout_width="0dip"
            android:layout_height="40dip"
            android:layout_marginLeft="15dp"
            android:gravity="center|left"
            style="@style/inspection_value"
            android:layout_weight="1.0"
            android:text="Title : "
            android:textAppearance="?android:attr/textAppearanceLarge"/>
        <ImageView
            android:id="@+id/item_img_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:contentDescription="@string/action_settings"
            android:src="@drawable/item_unpressed"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/itemBar_content"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="20dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:visibility="gone" >

    </LinearLayout>
    

</LinearLayout>

main_bar.xml 主要展开里面显示的布局文件

<?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" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这里是默认展开" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="这里是默认展开"
        />

</LinearLayout>

好了这样一个完整的控件就完成了另附代码与控件设计到的图片。ItemBar附件