[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





智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告