[android view]仿玖果视频的一个ListView滚动条

一直看到玖果视频一个控件做的不错，如图，毕竟自己写控件经验不足，一开始考虑麻烦了想继承某个现成控件，所以就开始找什么WheelWiew资料准备自己动手写，发现越走越远，突然想起来不可能这么麻烦，毕竟只是一个小控件，才想起组装现有控件（一开始我走偏，感觉是因为这个组件的分层问题导致的）。

解决方案：

1.选择用一个FrameLayout进行分层，分别按底层图片、ListView、选中图片、TextView顺序显示，注意ListView中item、选中图片、TextView几个控件的高度一定要一致，FrameLayout高度最好整除ListView中item的高度，这里我用android:layout_gravity="center"控制选中图片、TextView所处位置，当然也可以用 android:layout_height=""来进行控制。

2.一般的ListView在滑动后无法保证切好是滑过一行，所以在停止滑动后要做一个scroll偏移，一开始我想自己算出这个偏移量来，所以整来整去也没整好，其实我想多了我只要保证第一个是完全展示的就可以 int pos = listView.getFirstVisiblePosition();
            listView.smoothScrollToPosition(pos);这样就可以了

源码：

fragment_main.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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.visualization.MainActivity$PlaceholderFragment" >
  <FrameLayout
        android:layout_width="190dp"
        android:layout_height="280dp" >

        <ImageView
            android:id="@+id/backView1"
            android:layout_width="190dp"
            android:layout_height="280dp"
            android:layout_gravity="center_vertical"
            android:src="@+drawable/channel_game_nav_bg" >
        </ImageView>
 <ListView
            android:id="@+id/listView1"
            android:layout_width="190dp"
            android:layout_height="280dp" >
        </ListView>

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="190dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:src="@+drawable/channel_nav_item_background" >
        </ImageView>
       <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/hello_world"
            android:textColor="#000000"
            android:textSize="20dp" />
    </FrameLayout>

</RelativeLayout>

listitem.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView1"
    android:layout_width="190dp"
    android:layout_height="40dp"
    android:gravity="center"
    android:text="Hello"
    android:textColor="#000000"
    android:textSize="20dp" />

MainActivity.java

public class MainActivity extends Activity {
	ListView listView;
	TextView showSlectView;
	final String[] strs = new String[] { " ", "  ", "  ", "first", "second",
			"third", "fourth", "fifth", "sixth", "  ", "  ", "  " };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.fragment_main);
		
		listView = (ListView) findViewById(R.id.listView1);
		showSlectView = (TextView) findViewById(R.id.textView1);
		listView.setAdapter(new ArrayAdapter<String>(this, R.layout.listitem,
				strs));

		
		listView.setOnScrollListener(new OnScrollListener() {

			@Override
			public void onScrollStateChanged(AbsListView arg0, int arg1) {
				// TODO Auto-generated method stub

				int pos = listView.getFirstVisiblePosition();
				listView.smoothScrollToPosition(pos);
			}

			@Override
			public void onScroll(AbsListView arg0, int firstVisibleItem,
					int visibleItemCount, int totalItemCount) {
				// TODO Auto-generated method stub

				int selectposition = (int) (firstVisibleItem + visibleItemCount / 2);
				showSlectView.setText(strs[selectposition]);

			}
		});

	}

}

总结，经验不足啊。。

参考

http://codego.net/560846/