andorid 使用ViewPager简单实现画廊Gallery效果 (一)

前言:一个人的一生应该是这样度过的:当他回首往事的时候,他不会因为虚度年华而悔恨,也不会因为碌碌无为而羞耻。                                                                                                                ———《钢铁是怎么样炼成的》尼古拉·奥斯特洛夫斯基

需求:项目中需要展示数据中间大两边小的画廊效果

源码地址:https://github.com/FollowExcellence/ViewPager_Gallery

效果图:

实现:

1.在根布局文件和ViewPager中添加 属性 android:clipChildren="false"

这个方法或者属性的作用就是viewgroup的子view是否在它应有的边界内绘制。默认为true,在其边界内绘制

 viewpager和其父级布局都需要禁止让子view在其限制内绘制,设置为false就可以接除限制了。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/ll_layout"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:clipChildren="false"
              android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="viewpager实现画廊效果"
        android:textColor="@color/colorPrimary"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:layout_marginBottom="30dp"
        android:clipChildren="false"
        android:layout_marginTop="30dp"/>
</LinearLayout>

2.创建Adapter,设置数据

MyAdapter.java

package com.suming.viewpager_gallery;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

/**
 * @创建者 mingyan.su
 * @创建时间 2018/7/27 9:26
 * @类描述 ${TODO}适配器
 */
public class MyAdapter extends PagerAdapter {

    private int[] mData;
    private Context mContext;

    public MyAdapter(Context ctx, int[] data) {
        this.mContext = ctx;
        this.mData = data;
    }

    @Override
    public int getCount() {
        return mData.length;// 返回数据的个数
    }

    @Override
    public Object instantiateItem(final ViewGroup container, final int position) {//子View显示
        View view = View.inflate(container.getContext(), R.layout.item, null);
        ImageView imageView = view.findViewById(R.id.iv_icon);
        imageView.setImageResource(mData[position]);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext, "当前条目:" + position, Toast.LENGTH_SHORT).show();
            }
        });

        container.addView(view);//添加到父控件
        return view;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;// 过滤和缓存的作用
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);//从viewpager中移除掉
    }
}

3.创建一个类实现ViewPager.PageTransformer,实现页面转换效果

ViewPager切换效果都是通过创建一个类实现ViewPager.PageTransformer然后重写transformPage方法来实现各种切换效果。

ZoomOutPageTransformer.java

package com.suming.viewpager_gallery;

import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * @创建者 mingyan.su
 * @创建时间 2018/7/27 9:26
 * @类描述 ${TODO}切换动画
 */
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    //自由控制缩放比例
    private static final float MAX_SCALE = 1f;
    private static final float MIN_SCALE = 0.8f;//0.85f

    @Override
    public void transformPage(View page, float position) {

        if (position <= 1) {

            float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);

            page.setScaleX(scaleFactor);

            if (position > 0) {
                page.setTranslationX(-scaleFactor * 2);
            } else if (position < 0) {
                page.setTranslationX(scaleFactor * 2);
            }
            page.setScaleY(scaleFactor);
        } else {

            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
        }
    }
}

4.主界面代码设置:

MainActivity.java
package com.suming.viewpager_gallery;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;

/**
 * @创建者 mingyan.su
 * @创建时间 2018/7/27 9:26
 * @类描述 ${TODO}主界面
 */
public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private LinearLayout ll_layout;

    //向导界面的图片
    private int[] mPics = new int[]{R.mipmap.icon_1, R.mipmap.icon_2, R.mipmap.icon_3, R.mipmap.icon_4, R.mipmap.icon_5};

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

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        ll_layout = (LinearLayout) findViewById(R.id.ll_layout);

        //设置适配器
        mViewPager.setAdapter(new MyAdapter(this, mPics));
        mViewPager.setPageMargin(20);
        mViewPager.setOffscreenPageLimit(mPics.length);
        mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());//3D画廊模式

        //左右都有图
        mViewPager.setCurrentItem(1);

        //viewPager左右两边滑动无效的处理
        ll_layout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                return mViewPager.dispatchTouchEvent(motionEvent);
            }
        });
    }
}

注意:viewpager需要添加 android-support-v4.jar 包的支持

点关注,不迷路


好了各位,以上就是这篇文章的全部内容了,能看到这里的人呀,都是人才。

我是suming,感谢各位的支持和认可,您的点赞、评论、收藏【一键三连】就是我创作的最大动力,我们下篇文章见!

如果本篇博客有任何错误,请批评指教,不胜感激 !

要想成为一个优秀的安卓开发者,这里有必须要掌握的知识架构,一步一步朝着自己的梦想前进!Keep Moving!

源码下载地址:https://github.com/FollowExcellence/ViewPager_Gallery

要在 Android使用 ZXing 实现扫码,需要进行以下步骤: 1. 在 build.gradle 文件中添加以下依赖: ``` dependencies { implementation 'com.google.zxing:core:3.4.1' implementation 'com.journeyapps:zxing-android-embedded:3.5.0' } ``` 2. 在布局文件中添加一个 SurfaceView 用于预览摄像头捕获的图像,并添加一个按钮用于触发扫码操作: ``` <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <SurfaceView android:id="@+id/surface_view" android:layout_width="match_parent" android:layout_height="match_parent" /> <Button android:id="@+id/scan_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Scan" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" /> </RelativeLayout> ``` 3. 在 Activity 中实现扫码逻辑。首先,初始化 ZXing 的核心类 CaptureManager 和 ViewfinderView,然后在 onResume() 方法中启动摄像头预览,并在 onPause() 方法中停止预览。在按钮点击事件中触发扫码操作,并在 onActivityResult() 方法中获取扫码结果。 ``` public class ScanActivity extends AppCompatActivity implements OnScanListener { private CaptureManager captureManager; private SurfaceView surfaceView; private ViewfinderView viewfinderView; private Button scanButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_scan); surfaceView = findViewById(R.id.surface_view); viewfinderView = findViewById(R.id.viewfinder_view); scanButton = findViewById(R.id.scan_button); captureManager = new CaptureManager(this, surfaceView, viewfinderView); captureManager.initializeFromIntent(getIntent(), savedInstanceState); captureManager.setOnScanListener(this); scanButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { captureManager.decode(); } }); } @Override protected void onResume() { super.onResume(); captureManager.onResume(); } @Override protected void onPause() { super.onPause(); captureManager.onPause(); } @Override protected void onDestroy() { super.onDestroy(); captureManager.onDestroy(); } @Override public void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); captureManager.onSaveInstanceState(outState); } @Override public void onScanResult(String result) { Toast.makeText(this, result, Toast.LENGTH_SHORT).show(); } @Override public void onScanError(Exception e) { Toast.makeText(this, e.getMessage(), Toast.LENGTH_SHORT).show(); } @Override public void onScanCancel() { // Do nothing } @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); captureManager.onActivityResult(requestCode, resultCode, data); } } ``` 以上就是使用 ZXing 实现扫码的基本步骤。你可以根据实际需求对代码进行修改和扩展。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值