android(9) ListView + ScrollView + ViewPager布局

一.ListView + ScrollView + ViewPager界面实现：

看了别人的源码总要总结一下，ListView与ScrollView两者之间是有冲突的，但有的时候，又不得不两者一块使用。主要就是ListView中item高度不确定，只要写死或先算出所有的item的高度和就能显示出你所需要的效果了。

效果图:

主界面：

public class MainActivity extends Activity {

	// viewPager
	private MyPageAdapter viewpageAdapter;

	private ArrayList<View> viewList;
	private ListView listview1;
	// listview数据条数
	private int dataNum = 10;
    //ScrollView
	private MyScrollView myscrollview1;
	//ViewPager
	private ViewPager viewpager;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_custom_morecustom_main);
		prepareData();
		//初始化view
		myscrollview1 = (MyScrollView)findViewById(R.id.myscrollview1);
		viewpager = (ViewPager) findViewById(R.id.viewpager);
		listview1 = (ListView) findViewById(R.id.listview1);

		viewpageAdapter = new MyPageAdapter();
		viewpager.setAdapter(viewpageAdapter);
		MyListAdapter1 adapter1 = new MyListAdapter1();
		listview1.setAdapter(adapter1);
		//设置高度
		new ListUtils(this).setListViewHeightBasedOnChildren(listview1);
		listview1.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				Toast.makeText(MainActivity.this, "哈哈",
						Toast.LENGTH_SHORT).show();
			}
		});
		//设置ScrollView滚动条为顶部
		myscrollview1.smoothScrollTo(0,20);

	}

	// ViewPager的图片初始化
	private void prepareData() {
		viewList = new ArrayList<View>();
		ImageView view1 = new ImageView(this);
		view1.setImageResource(R.drawable.w3);
		viewList.add(view1);
		ImageView view2 = new ImageView(this);
		view2.setImageResource(R.drawable.w2);
		viewList.add(view2);

	}

	private class MyListAdapter1 extends BaseAdapter {

		@Override
		public int getCount() {
			return dataNum;
		}

		@Override
		public Object getItem(int position) {
			return position;
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View view = View.inflate(getApplicationContext(),
					R.layout.activity_listview_item, null);
			return view;
		}

	}

	class MyPageAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return viewList.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(viewList.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(viewList.get(position));
			return viewList.get(position);
		}
	}

	//根据手机的分辨率从 dp 的单位 转成为 px(像素)
	public static int dip2px(Context context, float dpValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (dpValue * scale);
	}

	//根据手机的分辨率从 px(像素) 的单位 转成为 dp
	public static int px2dip(Context context, float pxValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (pxValue / scale);
	}

}

MyScrollView：

public class MyScrollView extends ScrollView {

	public MyScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	//触发拦截触摸事件默认为false
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		return false;
	}

}

ListUtils：

public class ListUtils {
	private Context context;

	public ListUtils(Context context){
		this.context = context;
	}

	public void setListViewHeightBasedOnChildren(ListView listView) {
		//  获取ListView对应的Adapter
		ListAdapter listAdapter = listView.getAdapter();
		if (listAdapter == null) {
			return;
		}
		//显示框显示三个item的高度,因为已经写死每个layout的高度是65
		int totalHeight = dip2px(context, 65) * 2;

		/*
		 * 这是显示完整的高度
		int totalHeight = 0 ;
		for (int i = 0; i < listAdapter.getCount(); i++) {
			totalHeight += dip2px(context, 65);
		}*/
		ViewGroup.LayoutParams params = listView.getLayoutParams();
		//设置listview显示完整需要的高度，getDividerHeight()分割符占有的高度
		params.height = totalHeight+ (listView.getDividerHeight() * (listAdapter.getCount() -1));
		listView.setLayoutParams(params);
	}

	//根据手机的分辨率从 dp 的单位 转成为 px(像素)
	public static int dip2px(Context context, float dpValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (dpValue * scale );
	}

	//根据手机的分辨率从 px(像素) 的单位 转成为 dp
	public static int px2dip(Context context, float pxValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (pxValue / scale );
	}

}

主界面布局：

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

    <com.example.testtexiao6.MyScrollView
        android:id="@+id/myscrollview1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <RelativeLayout
                android:id="@+id/relative1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <android.support.v4.view.ViewPager
                    android:id="@+id/viewpager"
                    android:layout_width="fill_parent"
                    android:layout_height="284dip"
                    android:background="#ffcc00" />

                <RelativeLayout
                    android:id="@+id/relative2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/viewpager" >

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="40dip"
                        android:gravity="center"
                        android:orientation="vertical" >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="2015年5月"
                            android:textColor="#f6466c"
                            android:textSize="14sp" />

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal" >

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="3dip"
                                android:text="25日"
                                android:textColor="#000000"
                                android:textSize="16sp"
                                android:textStyle="bold" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="3dip"
                                android:text="周一"
                                android:textSize="14sp" />
                        </LinearLayout>
                    </LinearLayout>

                    <View
                        android:id="@+id/view"
                        android:layout_width="1sp"
                        android:layout_height="40dip"
                        android:layout_centerInParent="true"
                        android:background="@android:color/darker_gray" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="40dip"
                        android:layout_toRightOf="@id/view"
                        android:gravity="center"
                        android:orientation="vertical" >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="PM超标"
                            android:textColor="#f6466c"
                            android:textSize="14sp" />

                    </LinearLayout>
                </RelativeLayout>
            </RelativeLayout>

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

                <LinearLayout
                    android:id="@+id/ll_02"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="4dip"
                        android:background="@android:color/holo_blue_bright" />

                    <View
                        android:layout_width="3dip"
                        android:layout_height="30dip"
                        android:layout_marginLeft="21dip"
                        android:background="@android:color/darker_gray" />
                </LinearLayout>
            </RelativeLayout>

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

                <LinearLayout
                    android:id="@+id/ll_04"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dip"
                        android:src="@drawable/icon_morecustom_12" />

                    <View
                        android:layout_width="3dip"
                        android:layout_height="160dip"
                        android:layout_marginLeft="21dip"
                        android:background="@android:color/darker_gray" />
                </LinearLayout>

                <TextView
                    android:id="@+id/tv_title04"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignTop="@id/ll_04"
                    android:layout_marginLeft="3dip"
                    android:layout_toRightOf="@id/ll_04"
                    android:text="今天已记录10项"
                    android:textColor="#f6466c"
                    android:textSize="18sp" />
                <ListView
                    android:id="@+id/listview1"
                    android:layout_width="280dip"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@id/tv_title04"
                    android:layout_below="@id/tv_title04"
                    android:layout_marginTop="5dip"
                    android:divider="@null" />
            </RelativeLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="20dip"
                />
        </LinearLayout>
    </com.example.testtexiao6.MyScrollView>
</RelativeLayout>

listview的item布局：

<?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="65dip"
    android:background="@android:drawable/editbox_background"
   >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="40dip"
        android:layout_height="40dip"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dip"
        android:background="@drawable/icon_morecustom_launcher" />

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dip"
        android:layout_marginTop="3dip"
        android:layout_toRightOf="@id/iv"
        android:text="滨州天气晴朗"
        android:textSize="14sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dip"
        android:layout_toRightOf="@id/tv_1"
        android:text="气温比较高"
        android:textColor="#f6466c"
        android:textSize="16sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/tv_1"
        android:layout_below="@id/tv_1"
        android:layout_marginTop="6dip"
        android:text="适合人们穿短袖"
        android:textColor="@android:color/darker_gray"
        android:textSize="14sp" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_morecustom_arrow"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        />
    <View android:layout_width="match_parent"
        android:layout_height="5dip"
        android:layout_alignParentBottom="true"
        />

</RelativeLayout>
时间： 2025-01-04 17:41:11

android(9) ListView + ScrollView + ViewPager布局的相关文章

android 关于listview scrollview 底部 控件无法显示的两个解决方案

方案一 用LinearLayout实现,代码如下: <!-- 中奖纪录 by mhd --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layou

Android高级控件——GridView ScrollView ViewPager （上）

Android高级控件--GridView ScrollView ViewPager (上) GridView 网格视图,网格视图组件,九宫图显示数据表格(一种控件) ScrollView滚动视图 是一个单一容器,只能包含一个组件. ViewPager左右滑动 SlideMenu侧边栏 PullToRefreshListView下拉刷新 ListView新闻 原声列表视图 <?xml version="1.0" encoding="utf-8"?> &l

ScrollView ViewPager ListView三者共存的问题

场景描述: ScrollView是整个界面的外层滑动控件,嵌套在里面的布局是ViewPager,ViewPager里面其中一个Page是ListView控件. 问题描述: ViewPager中的ListView获取到数据后不能显示,也就是不能展开,外层ScrollView不能滑动. 解决思路: 1.让ListView展开.(网上的说法是ScrollView与ListView嵌套不可取,但开发中设计界面如此,不用也不成,闲话少说),想让ListView撑开,只能依靠设置Adapter每个Item高

android滑动组件嵌套一般思路，多任务手势思路，触摸传递思路，【例】listview嵌套viewpager

在android UI开发中,我们经常会遇到这种需求: 两个支持滑动的组件,比如listview嵌套多个listview,listview的item是一个viewpager或gallary?亦或是scrollview嵌套scrollview等等. 一般情况下,你还可能需要支持如下几种功能: ¤ 两层组件都可以滑动 ¤ 不让两个组件同时滑动,或者让两个组件同时滑动并可以自己调节 ¤ 不影响底层view的子view和嵌套view的子view的点击事件 实现上述功能时,我们也经常遇到一些问题: ¤ 点

Android 设置ListView不可滚动 及在ScrollView中不可滚动的设置

http://m.blog.csdn.net/blog/yusewuhen/43706169 转载请注明出处: http://blog.csdn.net/androiddevelop/article/details/38815493 希望得到的效果是ListView不能滚动,但是最大的问题在与ListView Item还必有点击事件,如果不需要点击事件那就简单了,直接设置ListView.setEnable(false); 如果还需要点击事件,滚动与点击都是在ListView Touch处理机制

android 开发-ListView与ScrollView事件冲突处理(事件分发机制处理)

ListView和ScrollView都存在滚动的效果,所以一般不建议listView和scrollView进行嵌套使用,但有些需求则需要用到两者嵌套.在android的学习中学了一种事件分发处理机制. 如果listView显示在UI上部,而如imageView等显示在UI下部. 首先为listView注册一个滑动监听事件 通过为listView设置固定高度,并注册滑动监听事件.在划动监听事件中,记录用户是否滑动至listView数据底部. 通过activity的dispatchTouchEve

Android之ListView&amp;ViewPager模拟新闻界面

模拟新闻 APP 的界面 1)写 ListView 之前先写布局: 这里有两种 Item 的布局: 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent"

ScrollView + viewpager实现android的app主界面效果

ScrollView + viewpager实现android的app主界面效果 Android的主界面一般由两部分组成:导航栏,滑动的分屏(我自己这么叫的).其中滑动的分屏肯定是用的fragment,具体的承载的控件是viewpager.而导航分页栏用的控件就有很多了,tabhost,Scrollview或者自定义的都行. 个人认为tabhost和Scrollview都是比较好的,因为后期的可拓展性比较好,除非导航栏界面确实属于"自定义"范畴,基本上我们可以选择这两样就可以了. 其实

[Android] Android最简单ScrollView和ListView滚动冲突解决方案

[Question]问题描述: 单独的ListView列表能自动垂直滚动,但当将ListView嵌套在ScrollView后,会和ScrollView的滚动滑块冲突,造成ListView滑块显示不完整. activity_main.xml表现: <?xml version="1.0" encoding="utf-8"?><ScrollView xmlns:android="http://schemas.android.com/apk/re