[Android学UI之二]兑现网易新闻客户端左右滑动广告
[Android学UI之二]实现网易新闻客户端左右滑动广告
功能：
左右滑动的广告
使用说明：
这次使用：android.support.v4.view 来实现左右滑动。
这次简单实现了网易广告左右滑动效果。欢迎大家一起来学习讨论！！！
先看图吧，有图有真相！！！
接下来看看代码：
界面Activity:
package com.bbswp.netnews;
import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends Activity {
private ViewGroup mMainView = null;
private ViewPager mViewPager;
private ImageView[] mImageCircleViews;
private ViewGroup mImageCircleView = null;
private SlideImageLayout mSlideLayout;
private ArrayList<View> mImagePageViewList;
private TextView mSlideTitle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LayoutInflater inflater = getLayoutInflater();
mMainView = (ViewGroup) inflater.inflate(R.layout.activity_main, null);
mViewPager = (ViewPager) mMainView.findViewById(R.id.image_slide_page);
mSlideLayout = new SlideImageLayout(this.getApplicationContext());
int length = DataRes.slideImages.length;
mImageCircleViews = new ImageView[length];
mImageCircleView = (ViewGroup) mMainView.findViewById(R.id.layout_circle_images);
mSlideLayout.setCircleImageLayout(length);
mImagePageViewList = new ArrayList<View>();
for (int i = 0; i < length; i++) {
mImagePageViewList.add(mSlideLayout.getSlideImageLayout(DataRes.slideImages[i]));
mImageCircleViews[i] = mSlideLayout.getCircleImageLayout(i);
mImageCircleView.addView(mSlideLayout.getLinearLayout(mImageCircleViews[i], 10, 10));
}
// 设置默认的滑动标题
mSlideTitle = (TextView) mMainView.findViewById(R.id.tvSlideTitle);
mSlideTitle.setText(DataRes.slideTitles[0]);
setContentView(mMainView);
// 设置ViewPager
mViewPager.setAdapter(new SlideImageAdapter());
mViewPager.setOnPageChangeListener(new ImagePageChangeListener());
}
// 滑动图片数据适配器
private class SlideImageAdapter extends PagerAdapter {
@Override
public int getCount() {
return mImagePageViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
@Override
public void destroyItem(View view, int arg1, Object arg2) {
((ViewPager) view).removeView(mImagePageViewList.get(arg1));
}
@Override
public Object instantiateItem(View view, int position) {
((ViewPager) view).addView(mImagePageViewList.get(position));
return mImagePageViewList.get(position);
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void startUpdate(View arg0) {
}
@Override
public void finishUpdate(View arg0) {
}
}
// 滑动页面更改事件监听器
private class ImagePageChangeListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int index) {
mSlideLayout.setPageIndex(index);
mSlideTitle.setText(DataRes.slideTitles[index]);
for (int i = 0; i < mImageCircleViews.length; i++) {
mImageCircleViews[index].setBackgroundResource(R.drawable.dot_selected1);
if (index != i) {
mImageCircleViews[i].setBackgroundResource(R.drawable.dot_none1);
}
}
}
}
}
实现滑动时右下角圆点滑动代码：
package com.bbswp.netnews;
import android.content.Context;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.Toast;
import java.util.ArrayList;
public class SlideImageLayout {
private ArrayList<ImageView> mImageList = null;
private Context mContext = null;
private ImageView[] mImageViews = null;
private ImageView mImageView = null;
private int pageIndex = 0;
public SlideImageLayout(Context context) {
this.mContext = context;
mImageList = new ArrayList<ImageView>();
}
public View getSlideImageLayout(int id){
LinearLayout imageLinerLayout = new LinearLayout(mContext);
LinearLayout.LayoutParams imageLinerLayoutParames = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT,
1);
ImageView iv = new ImageView(mContext);
iv.setBackgroundResource(id);
iv.setOnClickListener(new ImageOnClickListener());
imageLinerLayout.addView(iv,imageLinerLayoutParames);
mImageList.add(iv);
return imageLinerLayout;
}
public View getLinearLayout(View view,int width,int height){
LinearLayout linerLayout = new LinearLayout(mContext);
LinearLayout.LayoutParams linerLayoutParames = new LinearLayout.LayoutParams(
width,
height,
1);
linerLayout.setPadding(2, 0, 2, 0);
linerLayout.addView(view, linerLayoutParames);
return linerLayout;
}
public void setCircleImageLayout(int size){
mImageViews = new ImageView[size];
}
public ImageView getCircleImageLayout(int index){
mImageView = new ImageView(mContext);
mImageView.setLayoutParams(new LayoutParams(10,10));
mImageView.setScaleType(ScaleType.FIT_XY);
mImageViews[index] = mImageView;
if (index == 0) {
mImageViews[index].setBackgroundResource(R.drawable.dot_selected1);
} else {
mImageViews[index].setBackgroundResource(R.drawable.dot_none1);
}
return mImageViews[index];
}
public void setPageIndex(int index){
pageIndex = index;
}
private class ImageOnClickListener implements OnClickListener{
@Override
public void onClick(View v) {
Toast.makeText(mContext, "我点击了第"+"["+pageIndex+"]几个", Toast.LENGTH_SHORT).show();
}
}
}
最后就是模拟数据：
package com.bbswp.netnews;
/**
* 模拟获取到的数据
*
* @author hudan
*/
public class DataRes {
// 滑动图片的集合，这里设置成了固定加载，当然也可动态加载。
static int[] slideImages = {
R.drawable.image01,
R.drawable.image02,
R.drawable.image03,
R.drawable.image04,
R.drawable.image05
};
static int[] slideTitles = {
R.string.title1,
R.string.title2,
R.string.title3,
R.string.title4,
R.string.title5,
};
}
下面是布局文件：
<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"
tools:context=".MainActivity" >
<FrameLayout
android:id="@+id/linearlayout_images_slide"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v4.view.ViewPager
android:id="@+id/image_slide_page"
android:layout_width="fill_parent"
android:layout_height="150dip"
android:focusable="true" />
<RelativeLayout
android:id="@+id/layout_title_text"
style="@style/Transparent"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="bottom"
android:background="#55000000" >
<RelativeLayout
android:id="@+id/layout_bar_image"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@drawable/image_page_bg" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="horizontal" >
<TextView
android:id="@+id/tvSlideTitle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:textColor="@android:color/white"
android:textSize="10dip" />
<LinearLayout
android:id="@+id/layout_circle_images"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_toRightOf="@id/tvSlideTitle"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:gravity="right|center" />
</RelativeLayout>
</RelativeLayout>
</FrameLayout>
</RelativeLayout>
源代码当然要分享给大家了，欢迎大家一起学习交流！！！
下载:http://download.csdn.net/detail/hudan2714/4809677