App新功能介绍画面的两种实现方式

作者: RickGe | 来源:发表于2016-11-12 17:09 被阅读473次

App新功能介绍画面的两种实现方式
Databinding-samples（四）-ViewModel
iOS 3DTouch
iOS开发-新功能特性操作引导界面的实现最优方案（APP新功能使
IOS 应用内评分
聊一聊Intent隐式启动在实际场景中的运用
Web App和Native App
iOS逆向工程 - 代码注入
iOS抓取web页图片并显示
iOS开发--屏幕旋转的问题

实现方式一

01 效果图（黑马-智慧北京）

SmartBeiJing.png

02 layout

activity_guide.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.support.v4.view.ViewPager
            android:id="@+id/vp_guide"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
   <RelativeLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp">
       <LinearLayout 
        android:id="@+id/ll_point"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"/>
       <ImageView 
           android:id="@+id/iv_red_point"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/circle_red"/>
   </RelativeLayout>
</RelativeLayout>

guide_vp_item.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" >
    <TextView
        android:id="@+id/tv_start_use"
        android:layout_width="100dp"
        android:layout_height="36dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="70dp"
        android:background="@drawable/guide_tv"
        android:gravity="center"
        android:text="@string/start_use"
        android:textColor="@color/tv_white"
        android:textSize="18sp"
        android:visibility="gone" />
</RelativeLayout>

03 activity

public class GuideActivity extends Activity {
    private Context mContext;
    int[] mGuidePicture = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
    private int mPointDis;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        mContext = this;
        initUI();
    }

    private void initUI() {
        ViewPager vp_guide = (ViewPager) findViewById(R.id.vp_guide);
        vp_guide.setAdapter(new GuidePagerAdapter());
        final LinearLayout ll_point = (LinearLayout) findViewById(R.id.ll_point);
        final ImageView iv_red_point = (ImageView) findViewById(R.id.iv_red_point);
        
        // 添加灰色小圆点
        ImageView imageView;
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                                                        LinearLayout.LayoutParams.WRAP_CONTENT, 
                                                        LinearLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.leftMargin = 20;
        
        for(int i = 0; i < mGuidePicture.length; i ++){
            imageView = new ImageView(mContext);
            imageView.setImageResource(R.drawable.circle_gray);
            if(i != 0){
                imageView.setLayoutParams(layoutParams);
            }
            
            ll_point.addView(imageView);
        }
        
        // 监听layout方法结束的事件,位置确定好之后再获取圆点间距
        // 视图树
        iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                // 移除监听,避免重复回调
                iv_red_point.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                // iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                // layout方法执行结束的回调
                mPointDis = ll_point.getChildAt(1).getLeft() - ll_point.getChildAt(0).getLeft();
                System.out.println("圆点距离:" + mPointDis);
            }
        });
        
        // 设置滑动事件监听
        vp_guide.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
            }
            @Override
            public void onPageScrolled(int position,float positionOffset, int positionOffsetPixels) {
                // 更新小红点距离
                // 计算小红点当前的左边距
                int leftMargin = (int) (mPointDis * positionOffset) + position * mPointDis;
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams();
                // 修改左边距
                params.leftMargin = leftMargin;
                // 重新设置布局参数
                iv_red_point.setLayoutParams(params);
            }
            
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
    
    class GuidePagerAdapter extends PagerAdapter{
        private ArrayList<View> mGuideViewList;

        public GuidePagerAdapter(){
            initData();
        }
        
        private void initData() {
            View view;
            mGuideViewList = new ArrayList<View>();
            for(int i = 0; i < mGuidePicture.length; i ++){
                view = View.inflate(mContext, R.layout.guide_vp_item, null);
                view.setBackgroundResource(mGuidePicture[i]);
                if(i == mGuidePicture.length - 1){
                    TextView tv_start_use = (TextView) view.findViewById(R.id.tv_start_use);
                    tv_start_use.setVisibility(View.VISIBLE);
                    tv_start_use.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(mContext, "Hello world", Toast.LENGTH_SHORT).show();
                        }
                    });
                }
                mGuideViewList.add(view);
            }
        }

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

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = mGuideViewList.get(position);
            container.addView(view);
            return view;
        }
        
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object); 
        }
    }
}

实现方式二

01 效果图（申通快递）

sto.png

02 layout
这里使用了开源控件viewpagerindicator

activity_guide.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
   <android.support.v4.view.ViewPager
            android:id="@+id/vp_guide"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
   <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:padding="5dp"
        app:radius="5dp"
        app:fillColor="#ff0000"
        app:pageColor="#666666"/>
</RelativeLayout>

guide_vp_item.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" >
    <TextView
        android:id="@+id/tv_start_use"
        android:layout_width="100dp"
        android:layout_height="36dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="70dp"
        android:background="@drawable/guide_tv"
        android:gravity="center"
        android:text="@string/start_use"
        android:textColor="@color/tv_white"
        android:textSize="18sp"
        android:visibility="gone" />
</RelativeLayout>

03 activity

public class GuideActivity extends Activity {
    private Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        mContext = this;
        initUI();
    }

    private void initUI() {
        ViewPager vp_guide = (ViewPager) findViewById(R.id.vp_guide);
        vp_guide.setAdapter(new GuidePagerAdapter());
        // 开源控件viewpagerindicator下CirclePageIndicator的使用
        PageIndicator mIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
        mIndicator.setViewPager(vp_guide);
    }

    class GuidePagerAdapter extends PagerAdapter {
        private ArrayList<View> mGuideViewList;

        public GuidePagerAdapter() {
            initData();
        }

        private void initData() {
            mGuideViewList = new ArrayList<View>();
            int[] guidePicture = new int[] { 
                    R.drawable.guide1,
                    R.drawable.guide2, 
                    R.drawable.guide3,
                    R.drawable.guide4
                };
            
            View view;
            for (int i = 0; i < guidePicture.length; i++) {
                view = View.inflate(mContext, R.layout.guide_vp_item, null);
                view.setBackgroundResource(guidePicture[i]);
                if (i == guidePicture.length - 1) {
                    TextView tv_start_use = (TextView) view.findViewById(R.id.tv_start_use);
                    tv_start_use.setVisibility(View.VISIBLE);
                    tv_start_use.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(mContext, "Hello world",Toast.LENGTH_SHORT).show();
                        }
                    });
                }

                mGuideViewList.add(view);
            }
        }

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

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = mGuideViewList.get(position);
            container.addView(view);
            return view;
        }

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

App新功能介绍画面的两种实现方式
实现方式一 01 效果图（黑马-智慧北京） 02 layout 03 activity 实现方式二 01 效果图...
Databinding-samples（四）-ViewModel
介绍这篇文章介绍接入viewModel的使得app更加解耦，实现方式有两种：ViewModel+Observab...
iOS 3DTouch
3D Touch，苹果iPhone 6s的新功能有Peek Pop 两种新手势实现点击app出现小弹框界面的方...
iOS开发-新功能特性操作引导界面的实现最优方案（APP新功能使
iOS开发新功能特性操作引导界面的实现最优方案在APP开发中，为了引导用户熟悉APP的新功能特性，需要我们做新功...
IOS 应用内评分
有两种方式可以实现该功能：方式一：跳转APP Store 应用详情，进行评分将下面的Apple ID 替换为你自...
聊一聊Intent隐式启动在实际场景中的运用
Android app要打开一个页面，通常有两种实现方式，一种是常见的显式启动。这种方式在APP内打开其他页面的...
Web App和Native App
移动App的实现有两种形态，一种是通过Web的方式实现，也就是在App内部通过加载Web网页的方式实现产品功能；另...
iOS逆向工程 - 代码注入
本文主要介绍利用动态库对第三方App实现代码静态注入，一般有两种注入方式：Framework，Dylib。大体包含...
iOS抓取web页图片并显示
实现思路目前ios原生接入web页有两种方式:UIWebView和WKWebView。所以本文两种方式都会介绍方...
iOS开发--屏幕旋转的问题
首先，在iOS中展示界面的方式有两种，push和modal那么，在app中如果想要实现随心所欲的屏幕旋转，就要分两...