本文主要介绍了Android仿小红书欢迎界面的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
1，觉得小红书的欢迎界面感觉很漂亮，就想来学习学习一下来实现类似于这种效果 。 原效果图如下：
2，根据效果我们来一点点分析
第一步：首先看一下我们的主界面布局文件视图效果如下：
main_activity.xml文件代码如下：
可以看到我们主界面的布局文件主要是两个控件，一个是包含上面小人行走效果的ImageView，然后是一个自定义ParallaxContainer控件，这个自定义控件的具体是什么我们先不要管，后面再和大家来慢慢解释
第二步：看一下我们主界面的MainActivity的代码
MainActivity.java
package com.qianmo.xiaohongshuwelcome; import android.app.Activity; import android.content.ActivityNotFoundException; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.widget.ImageView; import com.qianmo.xiaohongshuwelcome.parallaxpager.ParallaxContainer; /** * @author zhongdaxia 2014-12-15 */ public class MainActivity extends Activity { ImageView iv_man; ImageView rl_weibo; ParallaxContainer parallaxContainer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //获取当前窗体 final Window window = getWindow(); window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); /** * 动画支持11以上sdk,11以下默认不显示动画 * 若需要支持11以下动画,也可导入https://github.com/JakeWharton/NineOldAndroids */ if (android.os.Build.VERSION.SDK_INT > 10) { iv_man = (ImageView) findViewById(R.id.iv_man); parallaxContainer = (ParallaxContainer) findViewById(R.id.parallax_container); if (parallaxContainer != null) { parallaxContainer.setImage(iv_man); parallaxContainer.setLooping(false); iv_man.setVisibility(View.VISIBLE); parallaxContainer.setupChildren(getLayoutInflater(), R.layout.view_intro_1, R.layout.view_intro_2, R.layout.view_intro_3, R.layout.view_intro_4, R.layout.view_intro_5, R.layout.view_intro_6 ,R.layout.view_login); } } else{ setContentView(R.layout.view_login); } } } 我们看到代码很简单，主要是这几句有用的代码：
if (parallaxContainer != null) { parallaxContainer.setImage(iv_man); parallaxContainer.setLooping(false); iv_man.setVisibility(View.VISIBLE); parallaxContainer.setupChildren(getLayoutInflater(), R.layout.view_intro_1, R.layout.view_intro_2, R.layout.view_intro_3, R.layout.view_intro_4, R.layout.view_intro_5, R.layout.view_intro_6 ,R.layout.view_login); }① 将我们小人走路的那个ImageView添加到自定义控件ParallaxContainer中
② 将我们每一个的布局文件set到ParallaxContainer控件中去
这里给出R.layout.view_intro_1.xml文件代码，其他的类似，就不给出来了（这里的x_in、x_out、y_in等属性注意一下）
第三步：好了现在我们一定很好奇ParallaxContainer里面的内容，那我们从上面的方法慢慢去看，首先看一下ParallaxContainer中的setImage（）方法，代码如下：
ImageView iv; //将小人图片添加进来 public void setImage(ImageView iv) { this.iv = iv; }貌似没有什么，只是将它赋值给成员变量iv，我们接着看下一个setUpChildren()方法
//添加子view public void setupChildren(LayoutInflater inflater, int... childIds) { if (getChildCount() > 0) { throw new RuntimeException("setupChildren should only be called once when ParallaxContainer is empty"); } //创建打气筒 ParallaxLayoutInflater parallaxLayoutInflater = new ParallaxLayoutInflater( inflater, getContext()); //将所有的view添加到本控件上去 for (int childId : childIds) { View view = parallaxLayoutInflater.inflate(childId, this); viewlist.add(view); } //添加视觉view pageCount = getChildCount(); for (int i = 0; i 让我们一行行代码慢慢分析
if (getChildCount() > 0) { throw new RuntimeException("setupChildren should only be called once when ParallaxContainer is empty"); } //创建打气筒 ParallaxLayoutInflater parallaxLayoutInflater = new ParallaxLayoutInflater( inflater, getContext());
首先看一下这段代码只是if判断是否已经调用过setUpChildren()方法，没什么重要的，在看创建ParallaxLayoutInflater打气筒对象，我们来看看ParallaxLayoutInflater的具体代码，没什么重要的，只是里面有一个ParallaxFactory类我们没见过，留心一下！
package com.qianmo.xiaohongshuwelcome.parallaxpager; import android.content.Context; import android.view.LayoutInflater; public class ParallaxLayoutInflater extends LayoutInflater { protected ParallaxLayoutInflater(LayoutInflater original, Context newContext) { super(original, newContext); setUpLayoutFactory(); } private void setUpLayoutFactory() { if (!(getFactory() instanceof ParallaxFactory)) { setFactory(new ParallaxFactory(this, getFactory())); } } @Override public LayoutInflater cloneInContext(Context newContext) { return new ParallaxLayoutInflater(this, newContext); } } 再看下面一段代码，主要是将所有的布局文件添加到viewList集合中去，并填充到我们的布局中，我们继续往下看
//将所有的view添加到本控件上去 for (int childId : childIds) { View view = parallaxLayoutInflater.inflate(childId, this); viewlist.add(view); }下面一段代码主要是看拿到对应所有的子view，关键是我们的addParallaxView（）方法，具体代码如下：
//添加视觉view pageCount = getChildCount(); for (int i = 0; i
/** * 添加视觉view方法 * * @param view * @param pageIndex */ private void addParallaxView(View view, int pageIndex) { //通过递归方法拿到最小单元的view if (view instanceof ViewGroup) { ViewGroup viewGroup = (ViewGroup) view; for (int i = 0, childCount = viewGroup.getChildCount(); i 通过递归将每个布局文件中的最小单元view保存到parallaxView集合中去，但是等等，这里我们又发现了一个新的类ParallaxViewTag，让我们来具体代码
package com.qianmo.xiaohongshuwelcome.parallaxpager; public class ParallaxViewTag { //绑定每一个view对应的是哪一个下标的 protected int index; //x轴进入的速度 protected float xIn; protected float xOut; protected float yIn; protected float yOut; protected float alphaIn; protected float alphaOut; }貌似很简单，xIn、xOut貌似很熟悉和我们之前的布局文件属性app:x_in等属性对应了， 这样我们就懂了，这个类是相当于一个tag类，用于记录我们设置的特殊一些属性，然是我们这里有一个疑问，下面这个代码是get到tag，那我们是在哪里set里面的属性呢？
ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);
这时候我们要看看我们前面提到过的一个陌生类ParallaxFactory，看一下具体代码
package com.qianmo.xiaohongshuwelcome.parallaxpager; import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import com.qianmo.xiaohongshuwelcome.R; public class ParallaxFactory implements LayoutInflater.Factory { private final LayoutInflater.Factory factory; private ParallaxLayoutInflater mInflater; private static final String[] sClassPrefixList = { "android.widget.", "android.webkit.", "android.view." }; public ParallaxFactory(ParallaxLayoutInflater inflater, LayoutInflater.Factory factory) { mInflater = inflater; this.factory = factory; } @Override public View onCreateView(String name, Context context, AttributeSet attrs) { View view = null; if (context instanceof LayoutInflater.Factory) { view = ((LayoutInflater.Factory) context).onCreateView(name, context, attrs); } if (factory != null && view == null) { view = factory.onCreateView(name, context, attrs); } if (view == null) { view = createViewOrFailQuietly(name, context, attrs); } if (view != null) { onViewCreated(view, context, attrs); } return view; } protected View createViewOrFailQuietly(String name, Context context, AttributeSet attrs) { if (name.contains(".")) { return createViewOrFailQuietly(name, null, context, attrs); } for (final String prefix : sClassPrefixList) { final View view = createViewOrFailQuietly(name, prefix, context, attrs); if (view != null) { return view; } } return null; } protected View createViewOrFailQuietly(String name, String prefix, Context context, AttributeSet attrs) { try { return mInflater.createView(name, prefix, attrs); } catch (Exception ignore) { return null; } } /** * 主要是在viewCreated的时候将tag和view绑定起来 * * @param view * @param context * @param attrs */ protected void onViewCreated(View view, Context context, AttributeSet attrs) { int[] attrIds = {R.attr.a_in, R.attr.a_out, R.attr.x_in, R.attr.x_out, R.attr.y_in, R.attr.y_out,}; TypedArray a = context.obtainStyledAttributes(attrs, attrIds); if (a != null) { if (a.length() > 0) { ParallaxViewTag tag = new ParallaxViewTag(); tag.alphaIn = a.getFloat(0, 0f); tag.alphaOut = a.getFloat(1, 0f); tag.xIn = a.getFloat(2, 0f); tag.xOut = a.getFloat(3, 0f); tag.yIn = a.getFloat(4, 0f); tag.yOut = a.getFloat(5, 0f); view.setTag(R.id.parallax_view_tag, tag); } a.recycle(); } } } 主要看onViewCreated（）方法，可以看到，这里我们将对应的每个属性的值都set到了我们ParallaxViewTag中，我们接着看下面的代码，调用updateAdapterCount（）方法让适配器去更新adapter的数量，这里我们可以看到适配器是继承PagerAdapter类，用于ViewPager的适配器，这里使用LinkedList来存储View，这个方法很好，赞一下
//更新ViewPagerAdapter的数量 updateAdapterCount(); //具体代码 //被调用的时候好像是0 private void updateAdapterCount() { adapter.setCount(isLooping ? Integer.MAX_VALUE : pageCount); } //下面是adapter的具体代码 package com.qianmo.xiaohongshuwelcome.parallaxpager; import android.content.Context; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import java.util.LinkedList; import static android.view.ViewGroup.LayoutParams; import static android.view.ViewGroup.LayoutParams.MATCH_PARENT; public class ParallaxPagerAdapter extends PagerAdapter { private int count = 0; private final Context context; private final LinkedList recycleBin = new LinkedList(); public ParallaxPagerAdapter(Context context) { this.context = context; } public void setCount(int count) { this.count = count; } @Override public int getCount() { return count; } @Override public Object instantiateItem(ViewGroup container, int position) { View view; if (!recycleBin.isEmpty()) { view = recycleBin.pop(); } else { view = new View(context); view.setLayoutParams(new LayoutParams(MATCH_PARENT, MATCH_PARENT)); } container.addView(view); return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) { View view = (View) object; container.removeView(view); recycleBin.push(view); } @Override public boolean isViewFromObject(View view, Object object) { return view.equals(object); } } 我们继续往下看，后面的就是创建viewpager对象，并addview到主控件上，在attachOnPagerChangeListener（）方法中添加viewpager的滑动监听
/创建viewpager viewPager = new ViewPager(getContext()); viewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); viewPager.setId(R.id.parallax_pager); //给viewpager添加滑动监听 attachOnPageChangeListener(); //设置适配器 viewPager.setAdapter(adapter); //将viewpager添加到主控件中 addView(viewPager, 0);
这里我们在onPageScrollStateChanged（）方法判断是否开启下面小人行走的动画，通过onPageScrolled（）方法监听滑动的具体偏移量，通过view.setTranslationX（）方法来改变对应的属性
protected void attachOnPageChangeListener() { mCommonPageChangeListener = new ViewPager.OnPageChangeListener() { /** * 此方法是在状态改变的时候调用，其中arg0这个参数 有三种状态（0，1，2）。arg0 ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做。 * @param state */ @Override public void onPageScrollStateChanged(int state) { Log.v(TAG, "onPageScrollStateChanged" + state); iv.setBackgroundResource(R.drawable.man_run); final AnimationDrawable animationDrawable = (AnimationDrawable) iv.getBackground(); switch (state) { case 0: //处于展示阶段 finishAnim(animationDrawable); break; case 1: //正在滑动 isEnd = false; animationDrawable.start(); break; case 2: //滑动完毕 finishAnim(animationDrawable); break; } } //判断是否还是在左边 boolean isleft = false; /** * onPageScrolled(int arg0,float arg1,int arg2) ，当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到调用。其中三个参数的含义分别为： * @param pageIndex 当前页面，及你点击滑动的页面 * @param offset 当前页面偏移的百分比 * @param offsetPixels 当前页面偏移的像素位置 */ @Override public void onPageScrolled(int pageIndex, float offset, int offsetPixels) { // Log.v(TAG, "onPageScrolled" + pageIndex + " offset" + offset + " offsetPixels" + offsetPixels); if (offsetPixels <10) { isleft = false; } if (pageCount > 0) { pageIndex = pageIndex % pageCount; } if (pageIndex == 3) { if (isleft) { } else { iv.setX(iv.getLeft() - offsetPixels); } } ParallaxViewTag tag; for (View view : parallaxViews) { tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag); if (tag == null) { continue; } if ((pageIndex == tag.index - 1 || (isLooping && (pageIndex == tag.index - 1 + pageCount))) && containerWidth != 0) { // make visible view.setVisibility(VISIBLE); // slide in from right view.setTranslationX((containerWidth - offsetPixels) * tag.xIn); // slide in from top view.setTranslationY(0 - (containerWidth - offsetPixels) * tag.yIn); // fade in view.setAlpha(1.0f - (containerWidth - offsetPixels) * tag.alphaIn / containerWidth); } else if (pageIndex == tag.index) { // make visible view.setVisibility(VISIBLE); // slide out to left view.setTranslationX(0 - offsetPixels * tag.xOut); // slide out to top view.setTranslationY(0 - offsetPixels * tag.yOut); // fade out view.setAlpha(1.0f - offsetPixels * tag.alphaOut / containerWidth); } else { view.setVisibility(GONE); } } } @Override public void onPageSelected(int position) { Log.v(TAG, "onPageSelected" + position); currentPosition = position; } }; viewPager.setOnPageChangeListener(mCommonPageChangeListener); } 4，这里基本上就把源码分析完了，so，既然分析完别人的源码了下面就是结合到自己项目中去用了，当我们，想要实现一个翻页从顶部斜飞入的view，那我们的布局文件代码可以如下：
来看一下我们的效果：
这是Github下载地址，由于要源码的同学可以去下载一下，See You Next Time ！！！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持html中文网！
以上就是Android仿小红书欢迎界面的详细内容，更多请关注0133技术站其它相关文章！
