视差动画 - 酷狗音乐引导页

下面来看一个效果:

 完整代码如下:

public class MainActivity extends AppCompatActivity {

    private ParallaxViewPager vp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        android.support.v4.app.FragmentManager fragmentManager =
                getSupportFragmentManager();
        vp = findViewById(R.id.parallax_vp);
        vp.setLayout(fragmentManager,new int[] {
                R.layout.fragment_page_first,
                R.layout.fragment_page_second,
                R.layout.fragment_page_third});
    }

}

public class ParallaxViewPager extends ViewPager {

    private List<ParallaxFragment> fragments = new ArrayList<>();

    public ParallaxViewPager(@NonNull Context context) {
        this(context,null);
    }

    public ParallaxViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public void setLayout(FragmentManager fm,int [] layoutIds){
        fragments.clear();
        for (int layoutId : layoutIds) {
            ParallaxFragment fragment = new ParallaxFragment();
            Bundle bundle = new Bundle();
            bundle.putInt(ParallaxFragment.ID,layoutId);
            fragment.setArguments(bundle);
            fragments.add(fragment);
        }
        setAdapter(new ParallaxAdapter(fm));
        // 2.2.3  监听滑动改变位移
        addOnPageChangeListener(new OnPageChangeListener() {

            // 从第一张图 滑动到 第二张图 滑动的过程
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                // positionOffset值是 0-1  positionOffsetPixels值是 0-屏幕的宽度px

                // 获取左边出去的fragment右边进来的fragment
                ParallaxFragment outFragment = fragments.get(position) ;
                List<View> parallaxViews = outFragment.getViews();
                for (View parallaxView : parallaxViews) {
                    ParallaxTag tag = (ParallaxTag) parallaxView.getTag(R.id.parallax_tag);

                    // 为什么这样写 ?
                    parallaxView.setTranslationX((-positionOffsetPixels)*tag.translationXOut);
                    parallaxView.setTranslationY((-positionOffsetPixels)*tag.translationYOut);

                }


                try {
                    ParallaxFragment inFragment = fragments.get(position+1) ;
                    parallaxViews = inFragment.getViews();
                    for (View parallaxView : parallaxViews) {
                        ParallaxTag tag = (ParallaxTag) parallaxView.getTag(R.id.parallax_tag);

                        parallaxView.setTranslationX((getMeasuredWidth()-positionOffsetPixels)*tag.translationXIn);
                        parallaxView.setTranslationY((getMeasuredWidth()-positionOffsetPixels)*tag.translationYIn);

                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }


            // 已经切换完毕
            // 已经滑动到具体某一页,比如滑动到第一页、滑动到第二页、滑动到第三页
            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    public class ParallaxAdapter extends FragmentPagerAdapter{

        public ParallaxAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }
    }


}

public class ParallaxFragment extends Fragment
implements LayoutInflater.Factory2 {

    private CompatViewInflater mCompatViewInflater ;

    public static final String ID = "ids";

    //存放所有的需要位移的View
    private List<View> mParallaxViews = new ArrayList<>() ;
    //存放视差动画的属性
    private int[] mParallaxAttrs = new int[]{
            R.attr.translationXIn,
            R.attr.translationXOut ,
            R.attr.translationYIn,
            R.attr.translationYOut};

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        int layoutId = getArguments().getInt(ID);
        inflater = inflater.cloneInContext(getActivity()) ;
        LayoutInflaterCompat.setFactory2(inflater,this);
        return inflater.inflate(layoutId,container,false);
    }

    @Override
    public View onCreateView(View parent, String name, Context context, AttributeSet attrs) {
        // 所有的View都会在这里创建
        // 拦截到View的创建 获取View之后要去解析
        // 1.创建View
        // If the Factory didn't handle it, let our createView() method try
        View view = createView(parent , name  ,context , attrs) ;

        // 2.1 一个 activity的布局肯定对应多个这样的 SkinView
        if (view != null){
            // 解析所有的 我们关注的属性
            analysisAttrs(view , context , attrs) ;
        }
        return view;
    }

    /**
     * 解析所有的 我们关注的属性
     * @param view
     * @param context
     * @param attrs
     */
    private void analysisAttrs(View view, Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, mParallaxAttrs);
        if (array != null && array.getIndexCount() != 0){
            int n = array.getIndexCount();
            ParallaxTag tag = new ParallaxTag();
            for (int i = 0; i < n; i++) {
                int attr = array.getIndex(i);
                switch (attr){
                    case 0:
                        tag.translationXIn = array.getFloat(attr , 0f) ;
                        break;
                    case 1:
                        tag.translationXOut = array.getFloat(attr , 0f) ;
                        break;
                    case 2:
                        tag.translationYIn = array.getFloat(attr , 0f) ;
                        break;
                    case 3:
                        tag.translationYOut = array.getFloat(attr , 0f) ;
                        break;
                }
            }

            // 自定义属性怎么存? 需要一一绑定,在View上边设置tag
            view.setTag(R.id.parallax_tag , tag);
            mParallaxViews.add(view) ;
        }
        array.recycle();

    }

    private View createView(View parent, String name, Context context, AttributeSet attrs) {

        final boolean isPre21 = Build.VERSION.SDK_INT < 21;
        if (mCompatViewInflater == null){
            mCompatViewInflater = new CompatViewInflater() ;
        }

        // We only want the View to inherit it's context if we're running pre-v21
        final boolean inheritContext = isPre21 && true
                && shouldInheritContext((ViewParent) parent);

        return mCompatViewInflater.createView(parent, name, context, attrs, inheritContext,
                isPre21, /* Only read android:theme pre-L (L+ handles this anyway) */
                true /* Read read app:theme as a fallback at all times for legacy reasons */
        );
    } ;



    private boolean shouldInheritContext(ViewParent parent) {
        if (parent == null) {
            // The initial parent is null so just return false
            return false;
        }
        while (true) {
            if (parent == null) {
                // Bingo. We've hit a view which has a null parent before being terminated from
                // the loop. This is (most probably) because it's the root view in an inflation
                // call, therefore we should inherit. This works as the inflated layout is only
                // added to the hierarchy at the end of the inflate() call.
                return true;
            } else if (!(parent instanceof View)
                    || ViewCompat.isAttachedToWindow((View) parent)) {
                // We have either hit the window's decor view, a parent which isn't a View
                // (i.e. ViewRootImpl), or an attached view, so we know that the original parent
                // is currently added to the view hierarchy. This means that it has not be
                // inflated in the current inflate() call and we should not inherit the context.
                return false;
            }
            parent = parent.getParent();
        }
    }

    @Override
    public View onCreateView(String name, Context context, AttributeSet attrs) {
        return null;
    }

    public List<View> getViews(){
        return mParallaxViews;
    }

}
CompatViewInflater代码(参考源码):
public class CompatViewInflater {

    private static final Class<?>[] sConstructorSignature = new Class[]{
            Context.class, AttributeSet.class};
    private static final int[] sOnClickAttrs = new int[]{android.R.attr.onClick};

    private static final String LOG_TAG = "AppCompatViewInflater";

    private static final Map<String, Constructor<? extends View>> sConstructorMap
            = new ArrayMap<>();

    private final Object[] mConstructorArgs = new Object[2];

    public final View createView(View parent, final String name, @NonNull Context context,
                                 @NonNull AttributeSet attrs, boolean inheritContext,
                                 boolean readAndroidTheme, boolean readAppTheme) {
        final Context originalContext = context;

        // We can emulate Lollipop's android:theme attribute propagating down the view hierarchy
        // by using the parent's context
        if (inheritContext && parent != null) {
            context = parent.getContext();
        }
        if (readAndroidTheme || readAppTheme) {
            // We then apply the theme on the context, if specified
            context = themifyContext(context, attrs, readAndroidTheme, readAppTheme);
        }

        View view = null;

        // We need to 'inject' our tint aware Views in place of the standard framework versions
        switch (name) {
            case "TextView":
                view = new AppCompatTextView(context, attrs);
                break;
            case "ImageView":
                view = new AppCompatImageView(context, attrs);
                break;
            case "Button":
                view = new AppCompatButton(context, attrs);
                break;
            case "EditText":
                view = new AppCompatEditText(context, attrs);
                break;
            case "Spinner":
                view = new AppCompatSpinner(context, attrs);
                break;
            case "ImageButton":
                view = new AppCompatImageButton(context, attrs);
                break;
            case "CheckBox":
                view = new AppCompatCheckBox(context, attrs);
                break;
            case "RadioButton":
                view = new AppCompatRadioButton(context, attrs);
                break;
            case "CheckedTextView":
                view = new AppCompatCheckedTextView(context, attrs);
                break;
            case "AutoCompleteTextView":
                view = new AppCompatAutoCompleteTextView(context, attrs);
                break;
            case "MultiAutoCompleteTextView":
                view = new AppCompatMultiAutoCompleteTextView(context, attrs);
                break;
            case "RatingBar":
                view = new AppCompatRatingBar(context, attrs);
                break;
            case "SeekBar":
                view = new AppCompatSeekBar(context, attrs);
                break;
        }

        if (view == null) {
            // If the original context does not equal our themed context, then we need to manually
            // inflate it using the name so that android:theme takes effect.
            view = createViewFromTag(context, name, attrs);
        }

        if (view != null) {
            // If we have created a view, check it's android:onClick
            checkOnClickListener(view, attrs);
        }

        return view;
    }

    private View createViewFromTag(Context context, String name, AttributeSet attrs) {
        if (name.equals("view")) {
            name = attrs.getAttributeValue(null, "class");
        }

        try {
            mConstructorArgs[0] = context;
            mConstructorArgs[1] = attrs;

            if (-1 == name.indexOf('.')) {
                // try the android.widget prefix first...
                return createView(context, name, "android.widget.");
            } else {
                return createView(context, name, null);
            }
        } catch (Exception e) {
            // We do not want to catch these, lets return null and let the actual LayoutInflater
            // try
            return null;
        } finally {
            // Don't retain references on context.
            mConstructorArgs[0] = null;
            mConstructorArgs[1] = null;
        }
    }

    /**
     * android:onClick doesn't handle views with a ContextWrapper context. This method
     * backports new framework functionality to traverse the Context wrappers to find a
     * suitable target.
     */
    private void checkOnClickListener(View view, AttributeSet attrs) {
        final Context context = view.getContext();

        if (!ViewCompat.hasOnClickListeners(view) || !(context instanceof ContextWrapper)) {
            // Skip our compat functionality if: the view doesn't have an onClickListener,
            // or the Context isn't a ContextWrapper
            return;
        }

        final TypedArray a = context.obtainStyledAttributes(attrs, sOnClickAttrs);
        final String handlerName = a.getString(0);
        if (handlerName != null) {
            view.setOnClickListener(new DeclaredOnClickListener(view, handlerName));
        }
        a.recycle();
    }

    private View createView(Context context, String name, String prefix)
            throws ClassNotFoundException, InflateException {
        Constructor<? extends View> constructor = sConstructorMap.get(name);

        try {
            if (constructor == null) {
                // Class not found in the cache, see if it's real, and try to add it
                Class<? extends View> clazz = context.getClassLoader().loadClass(
                        prefix != null ? (prefix + name) : name).asSubclass(View.class);

                constructor = clazz.getConstructor(sConstructorSignature);
                sConstructorMap.put(name, constructor);
            }
            constructor.setAccessible(true);
            return constructor.newInstance(mConstructorArgs);
        } catch (Exception e) {
            // We do not want to catch these, lets return null and let the actual LayoutInflater
            // try
            return null;
        }
    }

    /**
     * Allows us to emulate the {@code android:theme} attribute for devices before L.
     */
    private static Context themifyContext(Context context, AttributeSet attrs,
                                          boolean useAndroidTheme, boolean useAppTheme) {
        final TypedArray a = context.obtainStyledAttributes(attrs, android.support.v7.appcompat.R.styleable.View, 0, 0);
        int themeId = 0;
        if (useAndroidTheme) {
            // First try reading android:theme if enabled
            themeId = a.getResourceId(android.support.v7.appcompat.R.styleable.View_android_theme, 0);
        }
        if (useAppTheme && themeId == 0) {
            // ...if that didn't work, try reading app:theme (for legacy reasons) if enabled
            themeId = a.getResourceId(android.support.v7.appcompat.R.styleable.View_theme, 0);

            if (themeId != 0) {
                Log.i(LOG_TAG, "app:theme is now deprecated. "
                        + "Please move to using android:theme instead.");
            }
        }
        a.recycle();

        if (themeId != 0 && (!(context instanceof ContextThemeWrapper)
                || ((ContextThemeWrapper) context).getThemeResId() != themeId)) {
            // If the context isn't a ContextThemeWrapper, or it is but does not have
            // the same theme as we need, wrap it in a new wrapper
            context = new ContextThemeWrapper(context, themeId);
        }
        return context;
    }

    /**
     * An implementation of OnClickListener that attempts to lazily load a
     * named click handling method from a parent or ancestor context.
     */
    private static class DeclaredOnClickListener implements View.OnClickListener {
        private final View mHostView;
        private final String mMethodName;

        private Method mResolvedMethod;
        private Context mResolvedContext;

        public DeclaredOnClickListener(@NonNull View hostView, @NonNull String methodName) {
            mHostView = hostView;
            mMethodName = methodName;
        }

        @Override
        public void onClick(@NonNull View v) {
            if (mResolvedMethod == null) {
                resolveMethod(mHostView.getContext(), mMethodName);
            }

            try {
                mResolvedMethod.invoke(mResolvedContext, v);
            } catch (IllegalAccessException e) {
                throw new IllegalStateException(
                        "Could not execute non-public method for android:onClick", e);
            } catch (InvocationTargetException e) {
                throw new IllegalStateException(
                        "Could not execute method for android:onClick", e);
            }
        }

        @NonNull
        private void resolveMethod(@Nullable Context context, @NonNull String name) {
            while (context != null) {
                try {
                    if (!context.isRestricted()) {
                        final Method method = context.getClass().getMethod(mMethodName, View.class);
                        if (method != null) {
                            mResolvedMethod = method;
                            mResolvedContext = context;
                            return;
                        }
                    }
                } catch (NoSuchMethodException e) {
                    // Failed to find method, keep searching up the hierarchy.
                }

                if (context instanceof ContextWrapper) {
                    context = ((ContextWrapper) context).getBaseContext();
                } else {
                    // Can't search up the hierarchy, null out and fail.
                    context = null;
                }
            }

            final int id = mHostView.getId();
            final String idText = id == View.NO_ID ? "" : " with id '"
                    + mHostView.getContext().getResources().getResourceEntryName(id) + "'";
            throw new IllegalStateException("Could not find method " + mMethodName
                    + "(View) in a parent or ancestor Context for android:onClick "
                    + "attribute defined on view " + mHostView.getClass() + idText);
        }
    }

}

ParallaxTag代码: 

public class ParallaxTag {

    public float translationXIn ;
    public float translationXOut ;
    public float translationYIn ;
    public float translationYOut ;

    @Override
    public String toString() {
        return "ParallaxTag{" +
                "translationXIn=" + translationXIn +
                ", translationXOut=" + translationXOut +
                ", translationYIn=" + translationYIn +
                ", translationYOut=" + translationYOut +
                '}';
    }

}

fragment_page_first.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootFirstPage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:background="@android:color/holo_orange_dark"
    tools:ignore="ContentDescription">

    <ImageView
        android:id="@+id/ivFirstImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/s_0_1"
        app:layout_heightPercent="35%"
        app:layout_widthPercent="50%"
        app:translationXIn="0.4"
        app:translationYIn="0.4"
        app:translationYOut="0.4"
        app:translationXOut="0.4" />

    <ImageView
        android:id="@+id/ivSecondImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:src="@mipmap/s_0_2"
        app:layout_heightPercent="10%"
        app:layout_marginRightPercent="12%"
        app:layout_marginTopPercent="27%"
        app:layout_widthPercent="12%"
        app:translationXIn="0.12"
        app:translationYIn="0.82"
        app:translationYOut="0.82"
        app:translationXOut="0.12" />

    <ImageView
        android:id="@+id/ivThirdImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_0_3"
        app:layout_heightPercent="25%"

        app:layout_marginLeftPercent="14%"

        app:layout_marginTopPercent="49%"
        app:layout_widthPercent="30%"
        app:translationXIn="0.16"
        app:translationXOut="0.16" />

    <ImageView
        android:id="@+id/ivFourthImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/s_0_4"
        app:layout_heightPercent="15%"
        app:layout_marginLeftPercent="14%"
        app:layout_marginTopPercent="39%"
        app:layout_widthPercent="20%"
        app:translationXIn="0.02"
        app:translationXOut="0.02" />

    <ImageView
        android:id="@+id/ivFifthImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"
        android:src="@mipmap/s_0_5"
        app:layout_heightPercent="15%"

        app:layout_marginTopPercent="22%"

        app:layout_widthPercent="45%"
        app:translationXIn="0.06"
        app:translationXOut="0.06" />

    <ImageView
        android:id="@+id/ivSixthImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_0_6"
        app:layout_heightPercent="6%"

        app:layout_marginLeftPercent="4%"

        app:layout_marginTopPercent="26%"
        app:layout_widthPercent="6%"
        app:translationXIn="0.18"
        app:translationXOut="0.18" />

    <ImageView
        android:id="@+id/ivSeventhImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_0_7"
        app:layout_heightPercent="8%"

        app:layout_marginLeftPercent="14%"

        app:layout_marginTopPercent="25%"
        app:layout_widthPercent="9%"
        app:translationXIn="0.28"
        app:translationXOut="0.28" />

    <ImageView
        android:id="@+id/ivEighthImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_0_8"
        app:layout_heightPercent="6%"

        app:layout_marginLeftPercent="77%"

        app:layout_marginTopPercent="38%"
        app:layout_widthPercent="8%"
        app:translationXIn="0.34"
        app:translationXOut="0.34" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="@string/text_web_ceo"
        android:textColor="@android:color/white"
        android:textSize="@dimen/text_size_large"
        app:layout_heightPercent="15%"
        app:layout_marginBottomPercent="11%"
        app:layout_widthPercent="45%" />
</android.support.percent.PercentRelativeLayout>

 

fragment_page_second.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    android:id="@+id/rootSecondPage"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="ContentDescription"
    tools:background="@android:color/holo_green_dark">

    <ImageView
        android:id="@+id/ivFirstImage"
        app:translationXIn="0.4"
        app:translationXOut="0.4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        android:src="@mipmap/s_1_1"

        app:layout_heightPercent="25%"
        app:layout_widthPercent="45%"/>

    <ImageView
        android:id="@+id/ivSecondImage"
        app:translationXIn="1.2"
        app:translationXOut="1.2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:alpha=".5"
        android:src="@mipmap/s_1_2"
        app:layout_heightPercent="6%"
        app:layout_marginRightPercent="14%"
        app:layout_marginTopPercent="30%"
        app:layout_widthPercent="19%"/>


    <ImageView
        android:id="@+id/ivThirdImage"
        app:translationXIn="0.16"
        app:translationXOut="0.16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_1_3"

        app:layout_heightPercent="8%"
        app:layout_marginLeftPercent="46%"
        app:layout_marginTopPercent="43%"
        app:layout_widthPercent="15%"/>

    <ImageView
        android:id="@+id/ivFourthImage"
        app:translationXIn="0.2"
        app:translationXOut="0.2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_1_4"

        app:layout_heightPercent="10%"
        app:layout_marginLeftPercent="44%"
        app:layout_marginTopPercent="52%"
        app:layout_widthPercent="13%"/>

    <ImageView
        app:translationXIn="0.06"
        app:translationXOut="0.06"
        android:id="@+id/ivSixthImage"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_1_6"

        app:layout_heightPercent="7%"
        app:layout_marginLeftPercent="20%"
        app:layout_marginTopPercent="47%"
        app:layout_widthPercent="20%"/>

    <ImageView
        app:translationXIn="0.18"
        app:translationXOut="0.18"
        android:id="@+id/ivSeventhImage"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_1_7"

        app:layout_heightPercent="8%"
        app:layout_marginLeftPercent="22%"
        app:layout_marginTopPercent="35%"
        app:layout_widthPercent="17%"/>

    <ImageView
        app:translationXIn="0.28"
        app:translationXOut="0.28"
        android:id="@+id/ivFifthImage"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"

        android:src="@mipmap/s_1_5"

        app:layout_heightPercent="10%"
        app:layout_marginTopPercent="33%"
        app:layout_widthPercent="15%"/>

    <ImageView
        app:translationXIn="0.14"
        app:translationXOut="0.14"
        android:id="@+id/ivEighthImage"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"

        android:src="@mipmap/s_1_8"

        app:layout_heightPercent="10%"
        app:layout_marginTopPercent="22%"
        app:layout_widthPercent="25%"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"

        android:gravity="center"

        android:text="@string/text_web_dev"
        android:textColor="@android:color/white"
        android:textSize="@dimen/text_size_large"

        app:layout_heightPercent="15%"
        app:layout_marginBottomPercent="11%"
        app:layout_widthPercent="45%"/>
</android.support.percent.PercentRelativeLayout>

 fragment_page_third.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    android:id="@+id/rootThirdPage"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="ContentDescription"
    tools:background="@android:color/holo_blue_dark">

    <ImageView
        android:id="@+id/ivThirdImage"
        app:translationXIn="0.4"
        app:translationXOut="0.4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_2_3"

        app:layout_heightPercent="40%"
        app:layout_marginTopPercent="27%"
        app:layout_widthPercent="100%"/>

    <ImageView
        android:id="@+id/ivSecondImage"
        app:translationXIn="0.12"
        app:translationXOut="0.12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:alpha=".5"

        android:src="@mipmap/s_2_2"

        app:layout_heightPercent="27%"
        app:layout_marginLeftPercent="20%"
        app:layout_marginRightPercent="12%"
        app:layout_marginTopPercent="20%"
        app:layout_widthPercent="75%"/>

    <ImageView
        android:id="@+id/ivFirstImage"
        app:translationXIn="0.16"
        app:translationXOut="0.16"
        app:translationYIn="0.4"
        app:translationYOut="0.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        android:src="@mipmap/s_2_1"

        app:layout_heightPercent="18%"
        app:layout_widthPercent="55%"/>


    <ImageView
        android:id="@+id/ivFourthImage"
        app:translationXIn="0.2"
        app:translationXOut="0.2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_2_4"

        app:layout_heightPercent="7%"
        app:layout_marginLeftPercent="33%"
        app:layout_marginTopPercent="34%"
        app:layout_widthPercent="16%"/>

    <ImageView
        android:id="@+id/ivSixthImage"
        app:translationXIn="0.06"
        app:translationXOut="0.06"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_2_6"

        app:layout_heightPercent="7%"
        app:layout_marginLeftPercent="57%"
        app:layout_marginTopPercent="29%"
        app:layout_widthPercent="14%"/>

    <ImageView
        android:id="@+id/ivSeventhImage"
        app:translationXIn="0.18"
        app:translationXOut="0.18"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_2_7"

        app:layout_heightPercent="15%"
        app:layout_marginLeftPercent="65%"
        app:layout_marginTopPercent="47%"
        app:layout_widthPercent="25%"/>

    <ImageView
        android:id="@+id/ivFifthImage"
        app:translationXIn="0.28"
        app:translationXOut="0.28"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@mipmap/s_2_5"

        app:layout_heightPercent="10%"
        app:layout_marginLeftPercent="77%"
        app:layout_marginTopPercent="30%"
        app:layout_widthPercent="15%"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"

        android:gravity="center"

        android:text="@string/text_e_commerce"
        android:textColor="@android:color/white"
        android:textSize="@dimen/text_size_large"

        app:layout_heightPercent="15%"
        app:layout_marginBottomPercent="11%"
        app:layout_widthPercent="45%"/>
</android.support.percent.PercentRelativeLayout>

attrs文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- X方向上的位移 -->
    <attr name="translationXIn" format="float" />
    <attr name="translationXOut" format="float" />
    <!-- Y方向上的位移 -->
    <attr name="translationYIn" format="float" />
    <attr name="translationYOut" format="float" />
</resources>

 ids文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="parallax_tag" type="id"/>
</resources>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AD钙奶-lalala

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值