闪屏界面的实现分析
2016-04-26 17:25
316 查看
实现的效果:
view4_of_pager.xml文件:
PageAdapter 必须重写的四个函数:
boolean isViewFromObject(View arg0, Object arg1)
int getCount()
void destroyItem(ViewGroup container, int position,Object object)
Object instantiateItem(ViewGroup container, int position)
先看看各个函数,我们上面都做了什么吧:
主要代码及分析:
1.引导界面整体布局,在布局文件中首先加入ViewPager 这个组件,然后加入四个ImageView 组件,代码如下:
<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=".GuideActivit<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=".GuideActivity" > <android.support.v4.view.ViewPager android:id="@+id/vpGuide" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" > </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginTop="40dp" > <ImageView android:id="@+id/guide_dot1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_point_selected" /> <ImageView android:id="@+id/guide_2" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_point" /> <ImageView android:id="@+id/guide_3" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_point" /> <ImageView android:id="@+id/guide_4" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_point" /> </LinearLayout> </RelativeLayout>y" > <android.support.v4.view.ViewPager android:id="@+id/vpGuide" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" > </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginTop="40dp" > <ImageView android:id="@+id/guide_dot1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_point_selected" /> <ImageView android:id="@+id/guide_2" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_point" /> <ImageView android:id="@+id/guide_3" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_point" /> <ImageView android:id="@+id/guide_4" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_point" /> </LinearLayout> </RelativeLayout>
其中bg_point_selected的代码:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <solid android:color="#427AB7" /> <size android:height="8dp" android:width="8dp" /> </shape>bg_point文件如下:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!-- 未被选中 --> <solid android:color="@android:color/black" /> <size android:height="8dp" android:width="8dp" /> </shape>
2.切换布局文件:
view1_of_pager.xml:<?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:background="@drawable/guide_2" android:orientation="vertical" > </LinearLayout>view2_of_pager.xml文件、view3_of_pager.xml文件与上的代码相同,只是图片不同。
view4_of_pager.xml文件:
<?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:background="@drawable/guide_1" android:orientation="vertical" > <TextView android:id="@+id/tvGO" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="16dp" android:layout_marginRight="19dp" android:background="@drawable/start_select" android:gravity="center" android:text="GO" android:textColor="#ffffff" android:textSize="30sp" /> </RelativeLayout>
3.编写GuideAdapter类:
package com.example.cl; import java.util.List; import android.support.v4.view.PagerAdapter; import android.util.Log; import android.view.View; import android.view.ViewGroup; public class GuideAdapter extends PagerAdapter { private List<View> views; public GuideAdapter(List<View> views) { this.views = views; } @Override public int getCount() { return views.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { View view=views.get(position); container.removeView(view); } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(views.get(position)); return views.get(position); } } <span style="color:#ff0000;"> </span>
这里特别讲一下PageAdapter——PageView的适配器:
适配器想必大家都不莫生,在ListView中也有适配器,listView通过重写GetView()函数来获取当前要加载的Item。而PageAdapter不太相同,毕竟PageAdapter是单个VIew的合集。PageAdapter 必须重写的四个函数:
boolean isViewFromObject(View arg0, Object arg1)
int getCount()
void destroyItem(ViewGroup container, int position,Object object)
Object instantiateItem(ViewGroup container, int position)
先看看各个函数,我们上面都做了什么吧:
@Override public int getCount() { return views.size(); }getCount():返回要滑动的VIew的个数
@Override public void destroyItem(ViewGroup container, int position, Object object) { View view=views.get(position); container.removeView(view); }destroyItem():从当前container中删除指定位置(position)的View;
@Override public boolean isViewFromObject(View view, Object object) { return view==object; }这样重写
ad70
4.修改GuideActivity:
public class GuideActivity extends Activity { private List<View> guideViews; private ViewPager vpGuide; private int[]guide_dots={R.id.guide_dot1,R.id.guide_2,R.id.guide_3,R.id.guide_4}; private ImageView[] dots; private TextView tvGO; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_guide); initGuideViews(); initDots(); setListeners(); } private void setListeners() { vpGuide.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int position) { for(int i=0;i<guide_dots.length;i++){ if(position==i){ dots[i].setImageResource(R.drawable.bg_point_selected); }else{ dots[i].setImageResource(R.drawable.bg_point); } } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { } }); tvGO.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub Intent intent=new Intent(GuideActivity.this,LoginActivity.class); startActivity(intent); } }); } private void initDots() { dots=new ImageView[4]; for(int i=0;i<dots.length;i++){ dots[i]=(ImageView) findViewById(guide_dots[i]); } } private void initGuideViews() { vpGuide=(ViewPager) findViewById(R.id.vpGuide); //准备好切换的view guideViews=new ArrayList<View>(); LayoutInflater layoutInfalter=LayoutInflater.from(this); guideViews.add(layoutInfalter.inflate(R.layout.view1_of_pager, null)); guideViews.add(layoutInfalter.inflate(R.layout.view2_of_pager, null)); guideViews.add(layoutInfalter.inflate(R.layout.view3_of_pager, null)); <strong><span style="color:#ff0000;">View view4=layoutInfalter.inflate(R.layout.view4_of_pager, null); guideViews.add(view4); tvGO=(TextView) view4.findViewById(R.id.tvGO);</span></strong>
GuideAdapter guideAdapter=new GuideAdapter(guideViews); vpGuide.setAdapter(guideAdapter); } }
以上为实现闪屏界面的主要代码,还不完善,继续加油!!!!
相关文章推荐
- Android布局的小窍门?
- Web布局连载——两栏固定布局(五)
- 样式表CSS布局经验
- 在winform下实现左右布局多窗口界面的方法之续篇
- css网页布局中注意的几个问题小结
- DL.DT.DD实现左右的布局简单例子第1/2页
- 使用CSS框架布局的缺点和优点小结
- div+CSS网页布局的意义与副作用原因小结第1/2页
- 在winform下实现左右布局多窗口界面的方法
- Android App开发中ViewPager组件的入门使用教程
- Android编程之代码创建布局实例分析
- CSS顶级技巧大放送,div+css布局必知
- winform异型不规则界面设计的实现方法
- 用div实现像table一样的布局方法
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- jQuery EasyUi实战教程之布局篇
- jQuery EasyUI 布局之动态添加tabs标签页
- jQuery Easyui实现左右布局
- Android中设置只有程序第一次运行才显示的界面实现思路
- android自定义RadioGroup可以添加多种布局的实现方法