横向ListView及新闻头条

本文主要是介绍横向ListView及新闻头条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、横向的ListView

1，HorizontalListView【本质是自定义控件，该代码乃是照搬】

public class HorizontalListView extends AdapterView<ListAdapter> {public boolean mAlwaysOverrideTouch = true;protected ListAdapter mAdapter;private int mLeftViewIndex = -1;private int mRightViewIndex = 0;protected int mCurrentX;protected int mNextX;private int mMaxX = Integer.MAX_VALUE;private int mDisplayOffset = 0;protected Scroller mScroller;private GestureDetector mGesture;private Queue<View> mRemovedViewQueue = new LinkedList<View>();private OnItemSelectedListener mOnItemSelected;private OnItemClickListener mOnItemClicked;private boolean mDataChanged = false;public HorizontalListView(Context context, AttributeSet attrs) {super(context, attrs);initView();}private synchronized void initView() {mLeftViewIndex = -1;mRightViewIndex = 0;mDisplayOffset = 0;mCurrentX = 0;mNextX = 0;mMaxX = Integer.MAX_VALUE;mScroller = new Scroller(getContext());mGesture = new GestureDetector(getContext(), mOnGesture);}@Overridepublic void setOnItemSelectedListener(OnItemSelectedListener listener) {mOnItemSelected = listener;}@Overridepublic void setOnItemClickListener(OnItemClickListener listener) {mOnItemClicked = listener;}private DataSetObserver mDataObserver = new DataSetObserver() {@Overridepublic void onChanged() {synchronized (HorizontalListView.this) {mDataChanged = true;}invalidate();requestLayout();}@Overridepublic void onInvalidated() {reset();invalidate();requestLayout();}};@Overridepublic ListAdapter getAdapter() {return mAdapter;}@Overridepublic View getSelectedView() {// TODO: implementreturn null;}@Overridepublic void setAdapter(ListAdapter adapter) {if (mAdapter != null) {mAdapter.unregisterDataSetObserver(mDataObserver);}mAdapter = adapter;mAdapter.registerDataSetObserver(mDataObserver);reset();}private synchronized void reset() {initView();removeAllViewsInLayout();requestLayout();}@Overridepublic void setSelection(int position) {// TODO: implement}private void addAndMeasureChild(final View child, int viewPos) {LayoutParams params = child.getLayoutParams();if (params == null) {params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);}addViewInLayout(child, viewPos, params, true);child.measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.AT_MOST));}@Overrideprotected synchronized void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);if (mAdapter == null) {return;}if (mDataChanged) {int oldCurrentX = mCurrentX;initView();removeAllViewsInLayout();mNextX = oldCurrentX;mDataChanged = false;}if (mScroller.computeScrollOffset()) {int scrollx = mScroller.getCurrX();mNextX = scrollx;}if (mNextX < 0) {mNextX = 0;mScroller.forceFinished(true);}if (mNextX > mMaxX) {mNextX = mMaxX;mScroller.forceFinished(true);}int dx = mCurrentX - mNextX;removeNonVisibleItems(dx);fillList(dx);positionItems(dx);mCurrentX = mNextX;if (!mScroller.isFinished()) {post(new Runnable() {@Overridepublic void run() {requestLayout();}});}}private void fillList(final int dx) {int edge = 0;View child = getChildAt(getChildCount() - 1);if (child != null) {edge = child.getRight();}fillListRight(edge, dx);edge = 0;child = getChildAt(0);if (child != null) {edge = child.getLeft();}fillListLeft(edge, dx);}private void fillListRight(int rightEdge, final int dx) {while (rightEdge + dx < getWidth() && mRightViewIndex < mAdapter.getCount()) {View child = mAdapter.getView(mRightViewIndex, mRemovedViewQueue.poll(), this);addAndMeasureChild(child, -1);rightEdge += child.getMeasuredWidth();if (mRightViewIndex == mAdapter.getCount() - 1) {mMaxX = mCurrentX + rightEdge - getWidth();}mRightViewIndex++;}}private void fillListLeft(int leftEdge, final int dx) {while (leftEdge + dx > 0 && mLeftViewIndex >= 0) {View child = mAdapter.getView(mLeftViewIndex, mRemovedViewQueue.poll(), this);addAndMeasureChild(child, 0);leftEdge -= child.getMeasuredWidth();mLeftViewIndex--;mDisplayOffset -= child.getMeasuredWidth();}}private void removeNonVisibleItems(final int dx) {View child = getChildAt(0);while (child != null && child.getRight() + dx <= 0) {mDisplayOffset += child.getMeasuredWidth();mRemovedViewQueue.offer(child);removeViewInLayout(child);mLeftViewIndex++;child = getChildAt(0);}child = getChildAt(getChildCount() - 1);while (child != null && child.getLeft() + dx >= getWidth()) {mRemovedViewQueue.offer(child);removeViewInLayout(child);mRightViewIndex--;child = getChildAt(getChildCount() - 1);}}private void positionItems(final int dx) {if (getChildCount() > 0) {mDisplayOffset += dx;int left = mDisplayOffset;for (int i = 0; i < getChildCount(); i++) {View child = getChildAt(i);int childWidth = child.getMeasuredWidth();child.layout(left, 0, left + childWidth, child.getMeasuredHeight());left += childWidth;}}}public synchronized void scrollTo(int x) {mScroller.startScroll(mNextX, 0, x - mNextX, 0);requestLayout();}@Overridepublic boolean dispatchTouchEvent(MotionEvent ev) {boolean handled = mGesture.onTouchEvent(ev);return handled;}protected boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {synchronized (HorizontalListView.this) {mScroller.fling(mNextX, 0, (int) -velocityX, 0, 0, mMaxX, 0, 0);}requestLayout();return true;}protected boolean onDown(MotionEvent e) {mScroller.forceFinished(true);return true;}private OnGestureListener mOnGesture = new GestureDetector.SimpleOnGestureListener() {@Overridepublic boolean onDown(MotionEvent e) {return HorizontalListView.this.onDown(e);}@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {return HorizontalListView.this.onFling(e1, e2, velocityX, velocityY);}@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {synchronized (HorizontalListView.this) {mNextX += (int) distanceX;}requestLayout();return true;}@Overridepublic boolean onSingleTapConfirmed(MotionEvent e) {Rect viewRect = new Rect();for (int i = 0; i < getChildCount(); i++) {View child = getChildAt(i);int left = child.getLeft();int right = child.getRight();int top = child.getTop();int bottom = child.getBottom();viewRect.set(left, top, right, bottom);if (viewRect.contains((int) e.getX(), (int) e.getY())) {if (mOnItemClicked != null) {mOnItemClicked.onItemClick(HorizontalListView.this, child, mLeftViewIndex + 1 + i, mAdapter.getItemId(mLeftViewIndex + 1 + i));}if (mOnItemSelected != null) {mOnItemSelected.onItemSelected(HorizontalListView.this, child, mLeftViewIndex + 1 + i, mAdapter.getItemId(mLeftViewIndex + 1 + i));}break;}}return true;}};
}

2，使用 HorizontalListView activity_demo.xml

<?xml version="1.0" encoding="utf-8"?>
<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"tools:context=".MainActivity">//全域名<com.future.horizontallistview.HorizontalListViewandroid:id="@+id/horizon_listview"android:layout_width="match_parent"android:layout_height="150dp"android:layout_alignParentTop="true"></com.future.horizontallistview.HorizontalListView><ImageViewandroid:id="@+id/image_preview"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/horizon_listview"android:layout_centerInParent="true"android:background="@drawable/img_background"android:clickable="true" />
</RelativeLayout>

3，适配器的xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/item_background"android:clickable="true"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/list_item_img"android:layout_width="130dp"android:layout_height="130dp"android:src="@drawable/b" /><TextViewandroid:id="@+id/list_item_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="测试名称" />
</LinearLayout>

4，适配器实现代码 HorizontalListViewAdapter

public class HorizontalListViewAdapter extends BaseAdapter {private Context context;private String[] strs;private int[] ints;private LayoutInflater inflater;private int selectIndex = -1;public HorizontalListViewAdapter(Context context,String[] strs,int[] ints){this.context = context;this.strs = strs;this.ints = ints;inflater =(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);}@Overridepublic int getCount() {return ints.length;}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder;if(convertView == null){holder = new ViewHolder();convertView = inflater.inflate(R.layout.list_view_item_demo,null);holder.mImage = (ImageView) convertView.findViewById(R.id.list_item_img);holder.mTitle = (TextView) convertView.findViewById(R.id.list_item_text);convertView.setTag(holder);}else{holder = (ViewHolder) convertView.getTag();}if(selectIndex == position){convertView.setSelected(true);}else{convertView.setSelected(false);}holder.mTitle.setText(strs[position]);holder.mImage.setImageResource(ints[position]);return convertView;}public void setSelectIndex(int i){selectIndex = i;}class  ViewHolder{TextView mTitle;ImageView mImage;}
}

5，横向ListView照片查看器实现

public class Demo extends Activity {HorizontalListView hListView;HorizontalListViewAdapter hListViewAdapter;ImageView previewImg;@Overrideprotected void onCreate(Bundle savedInstanceState) {setContentView(R.layout.activity_demo);hListView = (HorizontalListView)findViewById(R.id.horizon_listview);previewImg = (ImageView)findViewById(R.id.image_preview);super.onCreate(savedInstanceState);initUI();}public void initUI(){String[] titles = {"美丽的女孩", "超级豪车", "未来概念车", "生活的美好", "美丽蝶梦想", "蝶泳蛙泳"};final int[] ids = {R.drawable.c, R.drawable.car1,R.drawable.car2, R.drawable.d,R.drawable.e, R.drawable.f};hListViewAdapter = new HorizontalListViewAdapter(getApplicationContext(),titles,ids);hListView.setAdapter(hListViewAdapter);hListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id) {previewImg.setImageResource(ids[position]);hListViewAdapter.setSelectIndex(position);hListViewAdapter.notifyDataSetChanged();}});}
}

效果如图所示：

其中，还有使用selector，使得大图展示被点击时能够变色。只实现横向ListView功能可以不加那些小的锻炼点。

二、ScrollView配合GridView

1，主布局xml文件 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/hot_selling_products_layout"android:layout_width="match_parent"android:layout_marginTop="5dp"android:layout_marginBottom="5dp"android:layout_height="wrap_content"android:orientation="vertical"><!--标题栏--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="40dp"android:background="@android:color/white"android:orientation="horizontal"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginLeft="20dp"android:src="@drawable/icon_fire" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginLeft="15dp"android:text="火爆热卖"android:textColor="#ff0000"android:textSize="20dp" /></LinearLayout><!--间隔带--><ImageViewandroid:layout_width="match_parent"android:layout_height="0.5dp"android:layout_marginTop="0dp"android:background="#e1e1e1" /><HorizontalScrollViewandroid:id="@+id/hot_selling_scroll_view"android:layout_width="fill_parent"android:layout_height="211dp"android:scrollbars="none"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><GridViewandroid:id="@+id/hot_selling_body_gv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:cacheColorHint="#00000000"android:gravity="center"android:listSelector="#00000000"android:numColumns="auto_fit"android:stretchMode="spacingWidthUniform"android:verticalSpacing="2dp"></GridView></LinearLayout></HorizontalScrollView></LinearLayout>

2，GridView的单元填充布局 main_grid_view_item

<?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"><ImageViewandroid:id="@+id/item_iv"android:layout_width="160dp"android:layout_height="160dp"android:layout_gravity="center" /><TextViewandroid:id="@+id/item_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="单元名称" />
</LinearLayout>

3，GridView适配器实现 BodyGridViewAdapter

public class BodyGridViewAdapter extends BaseAdapter{private ArrayList<String> mTitles;private ArrayList<Integer> mIndexs;private Context context;public BodyGridViewAdapter(Context context,ArrayList<String> mTitles,ArrayList<Integer> mIndexs){this.context = context;this.mTitles = mTitles;this.mIndexs = mIndexs;}@Overridepublic int getCount() {return mTitles.size();}@Overridepublic Object getItem(int position) {return mTitles.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder;if(convertView == null){holder = new ViewHolder();convertView = View.inflate(context, R.layout.main_grid_view_item,null);holder.mImage = (ImageView) convertView.findViewById(R.id.item_iv);holder.mTitle = (TextView) convertView.findViewById(R.id.item_title);convertView.setTag(holder);}else{holder = (ViewHolder) convertView.getTag();}holder.mTitle.setText(mTitles.get(position));holder.mImage.setImageResource(mIndexs.get(position));return convertView;}class ViewHolder{TextView mTitle;ImageView mImage;}
}

4，主类实现 MainActivity

public class MainActivity extends ActionBarActivity {private GridView contentBody;private ArrayList<String> mTitles;private ArrayList<Integer> mIndexs;private int itemNum;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);contentBody = (GridView) findViewById(R.id.hot_selling_body_gv);itemNum = 20;initData();}/*** 初始化数据*/private void initData() {//准备单元名称mTitles = new ArrayList<>();for(int i=0;i<itemNum;i++){String str = "单个条目名称"+i;mTitles.add(str);}//准备单元图片mIndexs = new ArrayList<>();                        //纯属逗乐   ~_~int tempIndex = R.drawable.a;mIndexs.add(tempIndex);tempIndex = R.drawable.b;mIndexs.add(tempIndex);tempIndex = R.drawable.c;mIndexs.add(tempIndex);tempIndex = R.drawable.e;mIndexs.add(tempIndex);tempIndex = R.drawable.f;mIndexs.add(tempIndex);tempIndex = R.drawable.g;mIndexs.add(tempIndex);tempIndex = R.drawable.girl;mIndexs.add(tempIndex);tempIndex = R.drawable.beautiful;mIndexs.add(tempIndex);tempIndex = R.drawable.car2;mIndexs.add(tempIndex);tempIndex = R.drawable.hurtheart;mIndexs.add(tempIndex);tempIndex = R.drawable.light;mIndexs.add(tempIndex);tempIndex = R.drawable.c;mIndexs.add(tempIndex);tempIndex = R.drawable.e;mIndexs.add(tempIndex);tempIndex = R.drawable.f;mIndexs.add(tempIndex);tempIndex = R.drawable.g;mIndexs.add(tempIndex);tempIndex = R.drawable.girl;mIndexs.add(tempIndex);tempIndex = R.drawable.beautiful;mIndexs.add(tempIndex);tempIndex = R.drawable.car2;mIndexs.add(tempIndex);tempIndex = R.drawable.hurtheart;mIndexs.add(tempIndex);tempIndex = R.drawable.light;mIndexs.add(tempIndex);int size = mTitles.size();int length = 160;           <strong>//控制单元格宽度</strong>DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);float density = dm.density;int gridviewWidth = (int) (size * (length + 4) * density);int itemWidth = (int) (length * density);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(gridviewWidth, LinearLayout.LayoutParams.FILL_PARENT);contentBody.setLayoutParams(params); // 设置GirdView布局参数,横向布局的关键contentBody.setColumnWidth(itemWidth); // 设置列表项宽contentBody.setStretchMode(GridView.NO_STRETCH);contentBody.setNumColumns(size); // 设置列数量=列表集合数BodyGridViewAdapter adapter = new BodyGridViewAdapter(MainActivity.this,mTitles,mIndexs);contentBody.setAdapter(adapter);contentBody.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1,int position, long arg3) {Toast.makeText(MainActivity.this,position+"被点击了",Toast.LENGTH_SHORT).show();}});}
}

展示效果：

三、新闻头条的形式

1，activity_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"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="50dp"android:orientation="horizontal"><TextViewandroid:text="新闻头条"android:layout_width="0dp"android:textSize="20sp"android:textColor="@android:color/holo_red_light"android:gravity="center"android:background="@drawable/e"android:layout_height="fill_parent"android:layout_weight="1"/><ImageViewandroid:layout_width="1dp"android:background="@android:color/holo_blue_light"android:layout_height="fill_parent" /><TextViewandroid:id="@+id/topnews_body"android:text="新闻头条"android:layout_width="0dp"android:textSize="20sp"android:textColor="@android:color/holo_red_light"android:layout_marginLeft="6dp"android:gravity="left|center_vertical"android:layout_height="fill_parent"android:background="@drawable/f"android:layout_weight="3"/></LinearLayout>
</RelativeLayout>

2，具体的实现类 MainActivity

public class MainActivity extends ActionBarActivity {private TextView topNewsBody;private ArrayList<String> topNews;private int currentNum = 0;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);topNewsBody = (TextView) findViewById(R.id.topnews_body);initData();}/*** 初始化数据*/private void initData() {topNews = new ArrayList<>();for (int i = 0; i < 10; i++) {String str = "新闻头条第" + i + "条";topNews.add(str);}if (topNews.size() > 0) {Timer timer = new Timer();timer.schedule(task, 1000, 3000);}topNewsBody.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "新闻头条第" + currentNum + "条被点击了！",Toast.LENGTH_SHORT).show();}});}Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {switch (msg.what) {case 101:changeContentOfNews();break;}super.handleMessage(msg);}};TimerTask task = new TimerTask() {@Overridepublic void run() {runOnUiThread(new Runnable() {@Overridepublic void run() {if (currentNum < topNews.size() - 1) {currentNum++;} else {currentNum = 0;}topNewsBody.setText(topNews.get(currentNum));TranslateAnimation ta = (TranslateAnimation) AnimationUtils.loadAnimation(MainActivity.this, R.anim.up_out_animation);topNewsBody.startAnimation(ta);}});}};
}

实现效果：