码迷，mamicode.com
首页 > 其他好文 > 详细

视觉差引导界面

时间：2016-05-12 14:19:35      阅读：278      评论：0      收藏：0      [点我收藏+]

标签：

界面展示：

技术分享

源码下载

代码:

MainActivity.java

package com.bzu.gxs.myguide;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import com.bzu.gxs.myguide.adapter.GalleryImageAdapter;
import com.bzu.gxs.myguide.utils.Cubic;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    FrameLayout frameLayout;
    HorizontalScrollView bg_horizontalScrollView;
    HorizontalScrollView layer_horizontalScrollView;
    private GalleryImageAdapter adapter;
    int total_page;
    int bg_width;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initAdapter();
        setViewPagerParams();
    }

    private void initAdapter() {
        adapter = new GalleryImageAdapter(this);
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.image_pager);
        frameLayout = (FrameLayout)findViewById(R.id.backgroundLayout);
        bg_horizontalScrollView = (HorizontalScrollView) findViewById(R.id.background_srcollview);
        bg_horizontalScrollView.setHorizontalScrollBarEnabled(false);
        layer_horizontalScrollView = (HorizontalScrollView) findViewById(R.id.layer_srcollview);
        layer_horizontalScrollView.setHorizontalScrollBarEnabled(false);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        // 获得窗口属性
        this.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        bg_width = displayMetrics.widthPixels * 5;
        ViewGroup.LayoutParams layoutParams;

        ImageView back_imageView = (ImageView) findViewById(R.id.back_image_one);
        layoutParams = back_imageView.getLayoutParams();
        layoutParams.height  = displayMetrics.heightPixels;
        layoutParams.width = displayMetrics.widthPixels;
        back_imageView.setLayoutParams(layoutParams);

        FrameLayout.LayoutParams fLayoutParams;
        ImageView layer_one = (ImageView) findViewById(R.id.layer_image_one);
        fLayoutParams = (FrameLayout.LayoutParams) layer_one.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_one.setLayoutParams(fLayoutParams);

        ImageView layer_two = (ImageView) findViewById(R.id.layer_image_two);
        fLayoutParams = (FrameLayout.LayoutParams) layer_two.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_two.setLayoutParams(fLayoutParams);

        ImageView layer_three = (ImageView) findViewById(R.id.layer_image_three);
        fLayoutParams = (FrameLayout.LayoutParams) layer_three.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_three.setLayoutParams(fLayoutParams);

        ImageView layer_four = (ImageView) findViewById(R.id.layer_image_four);
        fLayoutParams = (FrameLayout.LayoutParams) layer_four.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_four.setLayoutParams(fLayoutParams);

        ImageView layer_five = (ImageView) findViewById(R.id.layer_image_five);
        fLayoutParams = (FrameLayout.LayoutParams) layer_five.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_five.setLayoutParams(fLayoutParams);

    }

    private void setViewPagerParams() {
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                float realOffset  = Cubic.easeIn(positionOffset,0,1,1);

                total_page = adapter.getCount();
                float offset =(float)((float)(position + realOffset) *1.0 / total_page);
                int layyeroffsetPosition = (int)(bg_width * offset);
                layer_horizontalScrollView.scrollTo(layyeroffsetPosition,0);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

GalleryImageAdapter.java

package com.bzu.gxs.myguide.adapter;

import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import com.bzu.gxs.myguide.R;

/**
 * Created by GXS on 2016/5/9.
 */
public class GalleryImageAdapter extends PagerAdapter{

    private LayoutInflater mLayoutInflater;
    private Context context;
    public Handler mHandler;
    LayoutInflater inflater;

    public GalleryImageAdapter(Context context){
        mLayoutInflater = LayoutInflater.from(context);
        inflater = LayoutInflater.from(context);
        this.context = context;
    }

    @Override
    public int getCount() {
        return 5;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager)container).removeView((View)object);
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        final ViewHolder holder;
        holder = new ViewHolder();
        View imageLayout = mLayoutInflater.inflate(R.layout.activity_item,null);
        holder.image = (LinearLayout) imageLayout.findViewById(R.id.gallery_image_item_view);

        if (position == 4){
            holder.image.setEnabled(true);
        }
        else {
            holder.image.setEnabled(false);
        }
        if (position == 0){
            holder.image.removeAllViews();
            View view0 = inflater.inflate(R.layout.layout_one,null);
            holder.image.addView(view0);
        }
        else if (position == 1){
            holder.image.removeAllViews();
            View view1 = inflater.inflate(R.layout.layout_two,null);
            holder.image.addView(view1);
        }
        else if (position == 2){
            holder.image.removeAllViews();
            View view2 = inflater.inflate(R.layout.layout_three,null);
            holder.image.addView(view2);
        }
        else if (position ==3){
            holder.image.removeAllViews();
            View view3 = inflater.inflate(R.layout.layout_four,null);
            holder.image.addView(view3);
        }
        else if (position == 4){
            holder.image.removeAllViews();
            View view4 = inflater.inflate(R.layout.layout_five,null);
            holder.image.addView(view4);
        }
        ((ViewPager)container).addView(imageLayout,0);

        return imageLayout;
    }

    class ViewHolder{
        private LinearLayout image;
    }
}

Cubic.java

package com.bzu.gxs.myguide.utils;

/**
 * Created by GXS on 2016/5/10.
 */
public class Cubic {

    public static float easeIn(float t,float b,float c,float d){
        return c*(t/=d)*t*t +b;
    }
    public static float easeOut (float t,float b , float c, float d) {
        return c*((t=t/d-1)*t*t + 1) + b;
    }

    public static float easeInOut (float t,float b , float c, float d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    }
}

布局文件:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/backgroundLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical" >

    <HorizontalScrollView
        android:id="@+id/background_srcollview"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/back_image_one"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/tuitional_bg" />

        </LinearLayout>
    </HorizontalScrollView>

    <HorizontalScrollView
        android:id="@+id/layer_srcollview"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_one"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_two"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />

                <ImageView
                    android:layout_width="165dp"
                    android:layout_height="121dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="83dp"
                    android:src="@drawable/tuitional_img_2_1" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_three"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />

                <ImageView
                    android:layout_width="155dp"
                    android:layout_height="120dp"
                    android:layout_gravity="right"
                    android:layout_marginRight="27dp"
                    android:layout_marginTop="264dp"
                    android:src="@drawable/tuitional_img_3_1"
                    android:visibility="visible" />

                <ImageView
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:layout_gravity="right"
                    android:layout_marginRight="34dp"
                    android:layout_marginTop="325dp"
                    android:src="@drawable/tuitional_img_3_3"
                    android:visibility="visible" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_four"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />

                <ImageView
                    android:layout_width="127dp"
                    android:layout_height="190dp"
                    android:layout_marginLeft="50dp"
                    android:layout_marginTop="140dp"
                    android:src="@drawable/tuitional_img_4_1"
                    android:visibility="visible" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_five"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />

                <ImageView
                    android:layout_width="160dp"
                    android:layout_height="325dp"
                   android:layout_gravity="center_horizontal"
                    android:layout_marginTop="110dp"
                    android:src="@drawable/tuitional_img_5_1" />
            </FrameLayout>
        </LinearLayout>
    </HorizontalScrollView>

    <android.support.v4.view.ViewPager
        android:id="@+id/image_pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000" />
</FrameLayout>

activity_item.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="#00000000"
    android:orientation="vertical" >
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:id="@+id/gallery_image_item_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

layout_one.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"
    >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="155dp"
        android:layout_height="325dp"
        android:layout_gravity="center"
        android:src="@drawable/tuitional_img_1"
        android:visibility="visible" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="家居用品"
        android:textColor="#ffffff"
        android:textSize="28dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="各种家具应有尽有"
        android:textColor="#ffffff"
        android:textSize="16dp" />
</FrameLayout>

layout_two.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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="121dp"
        android:layout_height="260dp"
        android:layout_gravity="center_horizontal|left"
        android:layout_marginLeft="125dp"
        android:layout_marginTop="152dp"
        android:src="@drawable/tuitional_img_2_2" />

    <ImageView
        android:layout_width="122dp"
        android:layout_height="232dp"
        android:layout_gravity="center_horizontal|left"
        android:layout_marginLeft="77dp"
        android:layout_marginTop="190dp"
        android:src="@drawable/tuitional_img_2_3" />

    <ImageView
        android:layout_width="122dp"
        android:layout_height="232dp"
        android:layout_marginLeft="127dp"
        android:layout_marginTop="30dp"
        android:src="@drawable/tuitional_img_2_4" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="生活用品"
        android:textColor="#ffffff"
        android:textSize="28dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="各种生活用品应有尽有"
        android:textColor="#ffffff"
        android:textSize="16dp" />
</FrameLayout>

layout_three.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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="135dp"
        android:layout_height="287dp"
        android:layout_marginLeft="60dp"
        android:layout_marginTop="120dp"
        android:src="@drawable/tuitional_img_3_2"
        android:visibility="visible" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="商品详情"
        android:textColor="#ffffff"
        android:textSize="28dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="商品的详情信息"
        android:textColor="#ffffff"
        android:textSize="16dp" />
</FrameLayout>
layout_four.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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="128dp"
        android:layout_height="190dp"
        android:layout_marginLeft="144dp"
        android:layout_marginTop="165dp"
        android:src="@drawable/tuitional_img_4_2"
        android:visibility="visible" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="我的资料"
        android:textColor="#ffffff"
        android:textSize="28dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="关于我的信息"
        android:textColor="#ffffff"
        android:textSize="14dp" />
</FrameLayout>

activity_five.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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="210dp"
        android:layout_height="144dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="300dp"
        android:src="@drawable/tuitional_img_5_2" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="登陆/注册"
        android:textColor="#ffffff"
        android:textSize="24dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="快点加入吧"
        android:textColor="#ffffff"
        android:textSize="16dp" />
</FrameLayout>

视觉差引导界面

标签：

原文地址：http://blog.csdn.net/gxseveryday/article/details/51362680
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！