安卓开发之viewpager学习(头条显示)
activity_luancher.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:background="#FCF2E4" > <android.support.v4.view.ViewPager android:id="@+id/viewpager_launcher" android:layout_width="match_parent" android:layout_height="match_parent"/> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/viewGroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="30dp" android:gravity="center_horizontal" android:orientation="horizontal" /> </RelativeLayout> </RelativeLayout>
android.support.v4.view.ViewPager是在xml加入一个viewpager控件。
activity_luancher_pager_item.xml的代码如下:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/tutorial_1"/> <TextView android:id="@+id/tv_start_headlines" android:layout_gravity="bottom|center_horizontal" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginBottom="60dp" android:paddingTop="12dp" android:paddingBottom="12dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:background="@drawable/start_headlines_bg" android:textColor="@color/launcher_item_select" android:textSize="16sp" android:visibility="invisible" android:text="开启我的头条"/> </FrameLayout>
这是每个viewpager页中的内容。
viewpager的Adapter提供图片等信息:
LauncherPagerAdapter.java代码:
package com.ansen.developerheadlines.adapter; import java.util.ArrayList; import java.util.List; import android.content.Context; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.ImageView; import com.ansen.developerheadlines.R; import com.ansen.developerheadlines.iview.ILauncherView; /** * ViewPager适配器 * @author ansen * @create time 2016-04-15 */ public class LauncherPagerAdapter extends PagerAdapter implements OnClickListener{ private ILauncherView launcherView; private List<View> views; //每页显示的图片 private int[] images=new int[]{R.drawable.tutorial_1,R.drawable.tutorial_2,R.drawable.tutorial_3,R.drawable.tutorial_4}; public LauncherPagerAdapter(Context context,ILauncherView launcherView){ views=new ArrayList<View>(); this.launcherView=launcherView; //初始化每页显示的View for(int i=0;i<images.length;i++){ View item=LayoutInflater.from(context).inflate(R.layout.activity_luancher_pager_item, null); ImageView imageview=(ImageView) item.findViewById(R.id.imageview); imageview.setImageResource(images[i]); item.findViewById(R.id.tv_start_headlines).setOnClickListener(this); views.add(item); } } public List<View> getViews() { return views; } @Override public int getCount() { return views == null ? 0 : views.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0==arg1; } @Override public void destroyItem(ViewGroup container, int position, Object object){ ((ViewPager) container).removeView(views.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { ((ViewPager) container).addView(views.get(position), 0); return views.get(position); } @Override public void onClick(View v) { launcherView.gotoMain(); } }
先将图片存入list<view>动态数组中(当然图片已经绑定在了各个view中)。
item.findViewById(R.id.tv_start_headlines).setOnClickListener(this);实现最后的页面的"开启头条"跳转,在前几个页面设置的invisible。
viewpager的adapter在切换view时,会先调用destroyitem函数,销毁显示的对象(view),然后调用instantiateItem新建一个需要显示的对象(view).
LauncherActivity.java代码:
package com.ansen.developerheadlines.activity; import android.annotation.SuppressLint; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.View; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import com.ansen.developerheadlines.R; import com.ansen.developerheadlines.adapter.LauncherPagerAdapter; import com.ansen.developerheadlines.iview.ILauncherView; /** * 第一次启动页面 * * @author Ansen * @create time 2016-04-15 */ @SuppressLint("ResourceAsColor") public class LauncherActivity extends FragmentActivity implements ILauncherView { private ViewPager viewpagerLauncher; private LauncherPagerAdapter adapter; private ImageView[] tips; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_luancher); // if(!isFirst()){ // gotoMain(); // } viewpagerLauncher = (ViewPager) findViewById(R.id.viewpager_launcher); adapter = new LauncherPagerAdapter(this, this); viewpagerLauncher.setOffscreenPageLimit(2); viewpagerLauncher.setCurrentItem(0); viewpagerLauncher.setAdapter(adapter); viewpagerLauncher.setOnPageChangeListener(changeListener); ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);// 初始化底部显示控件 tips = new ImageView[4]; for (int i = 0; i < tips.length; i++){ ImageView imageView = new ImageView(this); if (i == 0) { imageView.setBackgroundResource(R.drawable.page_indicator_focused); } else { imageView.setBackgroundResource(R.drawable.page_indicator_unfocused); } tips[i] = imageView; LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); layoutParams.leftMargin = 10;// 设置点点点view的左边距 layoutParams.rightMargin = 10;// 设置点点点view的右边距 group.addView(imageView, layoutParams); } } private OnPageChangeListener changeListener = new OnPageChangeListener() { @Override public void onPageScrollStateChanged(int arg0) {} @Override public void onPageScrolled(int arg0, float arg1, int arg2) {} @Override public void onPageSelected(int index) { setImageBackground(index);// 改变点点点的切换效果 TextView tvStartHeadlines = (TextView) adapter.getViews().get(index).findViewById(R.id.tv_start_headlines); if (index == tips.length - 1) {// 最后一个 tvStartHeadlines.setVisibility(View.VISIBLE); } else { tvStartHeadlines.setVisibility(View.INVISIBLE); } } }; /** * 改变点点点的切换效果 * @param selectItems */ private void setImageBackground(int selectItems) { for (int i = 0; i < tips.length; i++) { if (i == selectItems) { tips[i].setBackgroundResource(R.drawable.page_indicator_focused); } else { tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused); } } } @Override public void gotoMain() { Intent intent = new Intent(this, MainActivity.class); startActivity(intent); finish(); } private boolean isFirst() { SharedPreferences setting = getSharedPreferences("headlines", 0); Boolean user_first = setting.getBoolean("FIRST", true); if (user_first) {// 第一次 setting.edit().putBoolean("FIRST", false).commit(); return true; } else { return false; } } }
ImageView[] tips是图片下面的转动条,设置事件随图片的变动而变动。
效果图: