效果如上,从viewpagerindicator工程中导入的类有:
PageIndicator
CirclePageIndicator
对于资源文件,哪里报错,导入哪个
Activity对应源码:
- /**
- * Created by yee on 15-1-8
- * 引导页
- * <ui>
- * <li>
- * 当滑到启动页的最后一页时,点击图片进入主界面
- * </li>
- * <li>
- * 如想更换启动图,只需更改{@link GuideFragment#BG_ICON_IDS}数组中的值即可,Note:数组中图片id的顺序默认为启动页图片的顺序
- * </li>
- * <li>
- * 如需更改启动页之后跳入的界面,只需更改{@link GuideVPActivity.GuideFragment#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)}中 startActivity(new Intent(getActivity(), MainActivity.class))的MainActivity.class的值即可
- * </li>
- * </ui>
- */
- public class GuideVPActivity extends FragmentActivity {
- @InjectView(R.id.vpGuide)
- ViewPager mVpGuide;
- @InjectView(R.id.indicator)
- CirclePageIndicator mIndicator;
- GuideVPAdapter mAdapter;
- FragmentManager mManager;
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- //anno无标题栏
- //requestWindowFeature(Window.FEATURE_NO_TITLE);
- //anno全屏
- getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
- setContentView(R.layout.six_guide_vp_activity_layout);
- ButterKnife.inject(this);
- init();
- }
- void init(){
- mManager = getSupportFragmentManager();
- mAdapter = new GuideVPAdapter(mManager);
- mVpGuide.setAdapter(mAdapter);
- mIndicator.setViewPager(mVpGuide);
- }
- private class GuideVPAdapter extends FragmentStatePagerAdapter{
- public GuideVPAdapter(FragmentManager fm) {
- super(fm);
- }
- @Override
- public Fragment getItem(int position) {
- return GuideFragment.newInstance(position);
- }
- @Override
- public int getCount() {
- return GuideFragment.BG_ICON_IDS.length;
- }
- }
- public static class GuideFragment extends Fragment{
- //anno 如果想更换引导页,只需将数组中的id替换即可
- static final int[] BG_ICON_IDS = {R.drawable.help_one, R.drawable.help_two, R.drawable.help_three, R.drawable.help_four};
- private static final String ARG_SECTION_NUMBER = "section_number";
- @InjectView(R.id.ivVPGuideFrgmnt)
- ImageView mIvVPGuideFrgmnt;
- public static GuideFragment newInstance(int pos){
- GuideFragment fragment = new GuideFragment();
- Bundle arg = new Bundle();
- arg.putInt(ARG_SECTION_NUMBER, pos);
- fragment.setArguments(arg);
- return fragment;
- }
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- View rootView = inflater.inflate(R.layout.vp_guide_fragment_layout,container,false);
- ButterKnife.inject(this,rootView);
- final int sectionNum = getArguments().getInt(ARG_SECTION_NUMBER);
- mIvVPGuideFrgmnt.setImageResource(BG_ICON_IDS[sectionNum]);
- //FIXME 实际上,应该在布局中加一个button,而不是现在这种监听整个imageview的点击事件(因为UED给的图中将界面与按钮放在一块儿了,故此处只能监听整个iv的点击事件)
- if (sectionNum == BG_ICON_IDS.length - 1) {
- mIvVPGuideFrgmnt.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- //anno如果要修改主界面,请将MainActivity替换
- startActivity(new Intent(getActivity(), MainActivity.class));
- getActivity().finish();
- }
- });
- }
- return rootView;
- }
- }
- }
/**
* Created by yee on 15-1-8
* 引导页
* <ui>
* <li>
* 当滑到启动页的最后一页时,点击图片进入主界面
* </li>
* <li>
* 如想更换启动图,只需更改{@link GuideFragment#BG_ICON_IDS}数组中的值即可,Note:数组中图片id的顺序默认为启动页图片的顺序
* </li>
* <li>
* 如需更改启动页之后跳入的界面,只需更改{@link GuideVPActivity.GuideFragment#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)}中 startActivity(new Intent(getActivity(), MainActivity.class))的MainActivity.class的值即可
* </li>
* </ui>
*/
public class GuideVPActivity extends FragmentActivity {
@InjectView(R.id.vpGuide)
ViewPager mVpGuide;
@InjectView(R.id.indicator)
CirclePageIndicator mIndicator;
GuideVPAdapter mAdapter;
FragmentManager mManager;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//anno无标题栏
//requestWindowFeature(Window.FEATURE_NO_TITLE);
//anno全屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.six_guide_vp_activity_layout);
ButterKnife.inject(this);
init();
}
void init(){
mManager = getSupportFragmentManager();
mAdapter = new GuideVPAdapter(mManager);
mVpGuide.setAdapter(mAdapter);
mIndicator.setViewPager(mVpGuide);
}
private class GuideVPAdapter extends FragmentStatePagerAdapter{
public GuideVPAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return GuideFragment.newInstance(position);
}
@Override
public int getCount() {
return GuideFragment.BG_ICON_IDS.length;
}
}
public static class GuideFragment extends Fragment{
//anno 如果想更换引导页,只需将数组中的id替换即可
static final int[] BG_ICON_IDS = {R.drawable.help_one, R.drawable.help_two, R.drawable.help_three, R.drawable.help_four};
private static final String ARG_SECTION_NUMBER = "section_number";
@InjectView(R.id.ivVPGuideFrgmnt)
ImageView mIvVPGuideFrgmnt;
public static GuideFragment newInstance(int pos){
GuideFragment fragment = new GuideFragment();
Bundle arg = new Bundle();
arg.putInt(ARG_SECTION_NUMBER, pos);
fragment.setArguments(arg);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.vp_guide_fragment_layout,container,false);
ButterKnife.inject(this,rootView);
final int sectionNum = getArguments().getInt(ARG_SECTION_NUMBER);
mIvVPGuideFrgmnt.setImageResource(BG_ICON_IDS[sectionNum]);
//FIXME 实际上,应该在布局中加一个button,而不是现在这种监听整个imageview的点击事件(因为UED给的图中将界面与按钮放在一块儿了,故此处只能监听整个iv的点击事件)
if (sectionNum == BG_ICON_IDS.length - 1) {
mIvVPGuideFrgmnt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//anno如果要修改主界面,请将MainActivity替换
startActivity(new Intent(getActivity(), MainActivity.class));
getActivity().finish();
}
});
}
return rootView;
}
}
}
- </pre>Activity所在的布局:R.layout.six_guide_vp_activity_layout<p></p><p></p><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
- android:layout_height="match_parent">
- <android.support.v4.view.ViewPager
- android:id="@+id/vpGuide"
- android:layout_width="match_parent"
- android:layout_height="match_parent"/>
- <CirclePageIndicator
- android:id="@+id/indicator"
- android:padding="10dip"
- android:layout_centerHorizontal="true"
- android:layout_alignParentBottom="true"
- android:layout_height="wrap_content"
- android:layout_width="fill_parent"
- />
- </RelativeLayout>
</pre>Activity所在的布局:R.layout.six_guide_vp_activity_layout<p></p><p></p><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/vpGuide"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<CirclePageIndicator
android:id="@+id/indicator"
android:padding="10dip"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
</RelativeLayout>
Fragment对应的布局:R.layout.vp_guide_fragment_layout
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
- android:layout_width="match_parent" android:layout_height="match_parent">
- <ImageView
- android:id="@+id/ivVPGuideFrgmnt"
- android:layout_width="match_parent"
- android:scaleType="centerCrop"
- android:src="@drawable/help_four"
- android:layout_height="match_parent" />
- </LinearLayout>