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

于 2015-07-01 12:50:19 发布
阅读量4.8k 收藏 5
点赞数 5
文章标签： 自定义伸缩框 自定义控件 android自定义伸缩框展开效果 展开效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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附件

 

想要更多的编程学习资料，请关注微信公众号：IT010101

 

 

 

 

 

 

 

代码码一代
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值