Android学习之书签效果的实现

最新推荐文章于 2021-05-26 13:15:03 发布

彩虹之西

最新推荐文章于 2021-05-26 13:15:03 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android.UI

本文链接：https://blog.youkuaiyun.com/cjllife/article/details/8751297

Android.UI 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何在Android中实现书签效果，通过布局设计和定制左右两边的标签列表适配器，创造出类似笔记本标签的视觉体验。文章提供了一个简单的实现流程，包括布局设计、适配器的实现和最终的整合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小时候我们曾今特别钟爱笔记本，尤其是那种带有标签的。现在我给出一种实现效果。如果有更好更炫的请多多指教。

先上效果图：

其实这个效果主要在布局和美工上，左边标签使用的图标而非Tab。

1 布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        >
        
        <RelativeLayout
            android:id="@+id/rlyout_left"
            android:layout_weight="1" 
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:background="@drawable/bg_sidebar"
            >
            <ListView
                android:id="@+id/lv_sms_head"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_alignParentRight="true"
                android:cacheColorHint="#00000000"
                android:divider="#00000000"
                android:fadeScrollbars="true"
                android:scrollbars="none" />
        </RelativeLayout>
        
        <RelativeLayout 
            android:id="@+id/rlyout_right"
            android:layout_weight="3" 
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            >
            <ListView
                android:id="@+id/lv_sms_content"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_alignParentLeft="true"
                android:cacheColorHint="#00000000"
                android:divider="#00000000"
                android:fadeScrollbars="true"
                android:scrollbars="vertical" />
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

左右两边分别为两个ListView

左边ListView的每一项的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/headlist_item_body"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@drawable/sidebar_tab_inactive" >
    
    <TextView 
        android:id="@+id/tv_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="问候祝福"
        android:textSize="14sp"
        android:textColor="@color/black"
        android:textStyle="bold"
        />
</LinearLayout>

右边ListView的每一项的布局如下：

<?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="wrap_content"
    android:orientation="vertical"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:paddingLeft="13dp"
    android:paddingRight="10dp" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="端午到了，我送你一个爱心粽子，第一层，体贴！第二层，关怀！第三层，浪漫！第四层，温馨！中间夹层，甜蜜！祝你天天都有一个好心情！"
            android:textColor="@color/black"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btn_forward"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@id/tv_content"
            android:focusable="false"
            android:background="@drawable/smsseed_forward_btn_bg" />
    </RelativeLayout>

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/smsseed_line" />

</LinearLayout>

其中对于转发按钮，其布局如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/icon_sent" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/icon_sent_press" />
    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/icon_sent_press" />
    <item android:drawable="@drawable/icon_sent" />   
</selector>

2 具体实现

2.1 左边标签列表适配器的实现

public class HeadListAdapter extends BaseAdapter {
		private LayoutInflater layoutInflater = null;
		private Context mContext;
		private List<Map<String, String>> mList;
		private int selectedPos;

		public HeadListAdapter(Context context,List<Map<String, String>> list) {
			this.mContext = context;
			this.mList = list;
			this.layoutInflater = LayoutInflater.from(context);
			this.selectedPos = 0;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return this.mList == null ? 0 : mList.size();
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return this.mList == null ? null : this.mList.get(position);
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return position;
		}

		// 设置选择项的位置
		public void setSelectedPos(int selectedPos) {
			this.selectedPos = selectedPos;
		}
		
		// 获取选择项的位置
		public int getSelectedPos(){
			return this.selectedPos;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			if (convertView == null) {
				convertView = layoutInflater.inflate(
						R.layout.headlist_item, null);
			}

			TextView headNameTextView = (TextView) convertView
					.findViewById(R.id.tv_name);
			LinearLayout body = (LinearLayout) convertView
					.findViewById(R.id.headlist_item_body);
			if (selectedPos == position) {
				body.setBackgroundResource(R.drawable.sidebar_tab_active);
			} else {
				body.setBackgroundResource(R.drawable.sidebar_tab_inactive);
			}
			if (mList.get(position).containsKey("rowName")) {
				headNameTextView.setText(mList.get(position).get("rowName"));
			}
			return convertView;
		}

	}

其中

if (selectedPos == position) {
	body.setBackgroundResource(R.drawable.sidebar_tab_active);
} else {
	body.setBackgroundResource(R.drawable.sidebar_tab_inactive);
}

是用来改变所选标签的背景的

2.2 右边标签列表适配器的实现

public class ContentListAdapter extends BaseAdapter {
		private LayoutInflater layoutInflater = null;
		private Context mContext;
		private List<Map<String, String>> mList;

		public ContentListAdapter(Context context,
				List<Map<String, String>> list) {
			this.mContext = context;
			this.mList = list;
			this.layoutInflater = LayoutInflater.from(context);
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return this.mList == null ? 0 : mList.size();
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return this.mList == null ? null : this.mList.get(position);
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			if (convertView == null) {
				convertView = layoutInflater.inflate(
						R.layout.contentlist_item, null);
			}

			TextView headNameTextView = (TextView) convertView
					.findViewById(R.id.tv_content);

			if (mList != null && mList.size() > position && mList.get(position).containsKey("info")) {
				headNameTextView.setText(mList.get(position).get("info"));
			}
			
			return convertView;
		}

	}

2.3 实现

剩下的就需要根据你是需要联网读取数据还是使用静态数据来绑定适配器来实现listView，这个应该不用说了。

对了短信转发代码如下：

Intent intent = null;
Uri uri = Uri.parse("smsto:");
intent = new Intent(Intent.ACTION_SENDTO, uri);
intent.putExtra("sms_body", contentList.get(position).get("info"));

需要说明的一点，在我实现过程中，因为设置的是点击右边列表的一项进行转发，而不是点击转发按钮转发，所以需要在转发按钮的布局文件中加入：