心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

【Android】炫酷ui 带你做一个背景跟着滚动的工具

发布时间：2022-07-02 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【Android】炫酷ui 带你做一个背景跟着滚动的工具，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

        在用ViewPager配合Fragment开发的模式中，想做一个类似于桌面壁纸的背景图，可以跟着ViewPager滑动。这里贴一下项目初期实现了的效果F1a;

【Android】炫酷ui 带你做一个背景跟着滚动的工具

 可以看到，界面中ViewPager滑动的同时背景图片也跟着滑动了，二者的滑动速率不一样。那么来

 大体思路：

                在ViewPager滑动的过程中，监听滑动百分比，再通过这个滑动的百分比来控制背景图的偏移，背景图的偏移通过背景图的尺寸和View容器的尺寸来计算。最后将这个偏移后的图片显示在ImageView或者某个View的Drawable上。（其实SurfaceView的性能会强得多，但是SurfaceView没有View属性，而且放在布局中还会让其他View的显示出现一些问题，特别是有半透明，阴影这些地方）

        那么接下来就开始吧，首先准备好一张背景图片，一个ViewPager，作者用的是VIewPager2。

        这里先放一个简单的一个ViewPager2。

ViewPagerAdapter.java


import andROId.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import org.jetbrains.annotations.NotNull;

/**
 * @author ldh
 * 时间: 2021/10/23 13:51
 * 邮箱: 2637614077@QQ.COM
 */
public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.MyViewHolder> {

    int maxCount = 0;

    public ViewPagerAdapter(int maxCount){
        this.maxCount = maxCount;
    }

    @NonNull
    @NotNull
    @override
    public MyViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewTyPE) {
        return new MyViewHolder(LayoutInflater.From(parent.getContext()).inflate(R.layout.ITem_viewpager, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull @NotNull MyViewHolder holder, int position) {
        holder.textView.setText("这是第" + (position + 1) + "页");
    }

    @Override
    public int getItemCount() {
        return maxCount;
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public MyViewHolder(@NonNull @NotNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.item_viewpager_textview);
        }
    }
}

MainActivity.kt

val viewpager2 = findViewById<ViewPager2>(R.id.viewpager2)
viewpager2.adapter = ViewPagerAdapter(4)

现在是这个效果，此时只是简单的完成了一个ViewPager。

 

【Android】炫酷ui 带你做一个背景跟着滚动的工具

 然后我们写一个工具类，用偏移比率来描述偏移量。

偏移比率：[0，1]之间，初始为0，0表示还没开始划，1就是已经划完了。因为图片的尺寸和view的尺寸是可能会随着需求动态变化的，所以只记录偏移的比例。

ImageScroller.kt

import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.graphics.Matrix
import android.os.Looper
import android.util.LOG
import android.widget.ImageView
import kotlin.math.roundToInt

/**
 * @author ldh
 * 时间: 2021/10/23 14:09
 * 邮箱: 2637614077@qq.com
 */
class ImageScroller {

    PRivate VAR bitmap: Bitmap? = null
    private val matrix = Matrix()
    /**
     * 分别是水平方向和竖直方向的偏移比率
     */
    private var offsetRateVertical: Float = 0f
    private var offsetRateHorizontal: Float = 0f

    /**
     * 关联的ImageView，如果ImageView为空，则设置View的Drawable，否则直接让ImageView显示图片
     */
    private var imageView: ImageView? = null

    /**
     * 容器的尺寸，也就是view的宽和高
     */
    private var containerHeight: Int = 0
    private var containerWidth: Int = 0

    /**
     * 图片的尺寸（经过拉伸后的）
     */
    private var imageHeight: Int = 0
    private var imageWidth: Int = 0

    companion object {
        /**
         * 滚动方向，默认为水平滚动
         */
        const val SCROLL_MODE_VERTICAL = 0
        const val SCROLL_MODE_HORIZONTAL = 1
    }
    private var scrollMode: Int = SCROLL_MODE_HORIZONTAL

    /**
     * 计算图片信息等相关参数
     */
    private fun measure() {
        bitmap?.let {
            if (containerHeight != 0 && containerWidth != 0) {
                //如果容器尺寸还没算，这里就没有意义了，所以加个判断
                var scale = 0f;
                if (scrollMode == SCROLL_MODE_HORIZONTAL) {
                    //水平滚动模式
                    //使图片的高度拉伸到图片的高度
                    //如果拉伸完过后图片的宽度比容器的宽度还小，那就使图片宽度拉伸到屏幕宽度，不然就会形成空白区域
                    scale = containerHeight / (it.height).toFloat()
                    val width = it.width * scale;
                    if (width < containerWidth) {
                        scale = containerWidth / (it.width).toFloat()
                    }
                } else {
                    //竖直滚动模式，逻辑同理
                    scale = containerWidth / (it.width).toFloat()
                    val height = it.height * scale;
                    if (height < containerHeight) {
                        scale = containerHeight / (it.height).toFloat()
                    }
                }
                imageWidth = (it.width * scale).roundToInt()
                imageHeight = (it.height * scale).roundToInt()
                matrix.setScale(scale, scale)
                matrix.postTranslate(
                    offsetRateHorizontal * (containerWidth - imageWidth),
                    offsetRateVertical * (containerHeight - imageHeight))
                draw()
            }
        }
    }

    /**
     * 设置图片，设置图片之后要计算参数
     */
    fun setBitmap(bitmap: Bitmap){
        this.bitmap = bitmap
        imageView?.setImageBitmap(bitmap)
        imageView?.scaleType = ImageView.ScaleType.MATRIX
        measure()
    }

    fun isVerticalScrollMode() = (scrollMode == SCROLL_MODE_VERTICAL)
    fun isHorizontalScrollMode() = (scrollMode == SCROLL_MODE_HORIZONTAL)


    /**
     * 计算容器的尺寸
     * 计算完过后还要计算一遍measure()
     */
    private fun measureContainer() {
        imageView?.post {
            containerHeight = imageView!!.height
            containerWidth = imageView!!.width
            measure()
        }
    }

    fun SETUPWithImageView(imageView: ImageView){
        if(this.imageView != null &amp;& this.imageView != imageView){
            return
        }
        imageView.scaleType = ImageView.ScaleType.MATRIX
        this.imageView = imageView
        bitmap?.let {
            setBitmap(it)
        }
        measureContainer()
    }

    fun setHorizontalScrollMode(){
        setScrollMode(SCROLL_MODE_HORIZONTAL)
    }

    fun setVerticalScrollMode(){
        setScrollMode(SCROLL_MODE_VERTICAL)
    }

    fun setScrollMode(scrollMode: Int){
        //每次发生切换的时候要重新measure()一次
        if (scrollMode == SCROLL_MODE_VERTICAL && this.scrollMode == SCROLL_MODE_HORIZONTAL){
            //从水平滚动切换到竖直滚动
            this.scrollMode = SCROLL_MODE_VERTICAL
            measure()
        }
        if(this.scrollMode == SCROLL_MODE_VERTICAL && scrollMode == SCROLL_MODE_HORIZONTAL){
            //从竖直滚动切换到滚动水平
            this.scrollMode = SCROLL_MODE_HORIZONTAL
            measure()
        }
    }

    /**
     * 增加或减少偏移率Y
     */
    fun varOffsetVerticalRate(offsetY: Float){
        this.offsetRateVertical += offsetY;
        matrix.postTranslate(0f, (containerHeight - imageHeight) * offsetY)
        draw()
    }

    fun setOffsetRate(offsetRate: Float) {
        //如果直接用set，那scale属性就没了
        matrix.postTranslate(-(containerWidth - imageWidth) * offsetRateHorizontal, -(containerHeight - imageHeight) * offsetRateVertical)
        if(isVerticalScrollMode()){
            offsetRateVertical = offsetRate
        }else {
            offsetRateHorizontal = offsetRate
        }
        matrix.postTranslate((containerWidth - imageWidth) * offsetRateHorizontal, (containerHeight - imageHeight) * offsetRateVertical)
        draw()
    }

    /**
     * 增加或减少偏移率X
     */
    fun varOffsetHorizontalRate(offsetX: Float){
        this.offsetRateHorizontal += offsetX;
        matrix.postTranslate( (containerWidth - imageWidth) * offsetX, 0f)
        draw()
    }

    fun draw(){
        //因为不能在子线程更新UI，所以每次要判断当前是否在主线程中
        if(isMainThread()){
            if(imageView != null){
                imageView!!.setImageMatrix(matrix)
            }
        }else{
            //如果是子线程调用的，那就发送到主线程去
            imageView?.post {
                draw()
            }
        }
    }

    /**
     * 判断当前程序是否在主线程中运行
     */
    fun isMainThread(): Boolean {
        return Thread.currentThread() === Looper.getMainLooper().thread
    }


    constructor()
    constructor(imageView: ImageView){
        setupWithImageView(imageView)
    }
    constructor(imageView: ImageView,bitmap: Bitmap){
        setupWithImageView(imageView)
        setBitmap(bitmap)
    }
    constructor(imageView: ImageView, id: Int){
        setupWithImageView(imageView)
        setBitmap(BitmapFactory.decodeResource(imageView.context.resources, id))
    }

}
 再写一个工具，用来绑定ViewPager和ImageScroller，作者在这里只写了一个ViewPager2的绑定器，其他的可以自己写，这里通过判断ViewPager2是竖直滑动还是水平滑动来动态改变ImageScroller的滑动模式

BindUtils.kt

import androidx.recyclerview.widget.RecyclerView
import androidx.viewpager2.widget.ViewPager2
import java.util.concurrent.Executors

/**
 * @author ldh
 * 时间: 2021/10/23 18:25
 * 邮箱: 2637614077@qq.com
 */
object BindUtils {

    fun bindWithViewPager2(viewPager2: ViewPager2?, imageScroller: ImageScroller?) {
        if(viewPager2 != null && imageScroller != null) {
            if(viewPager2.orientation == RecyclerView.HORIZONTAL){
                //viewPager是水平滑动，那设置ImageScroller也是水平滑动
                imageScroller.setHorizontalScrollMode()
            }else {
                imageScroller.setVerticalScrollMode()
            }
            viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
                //这里用子线程控制Image滑动，如果用主线程的话容易造成滑动动画卡顿掉帧
                val executorService = Executors.newSingleThreadExecutor();
                override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
                    super.onPageScrolled(position, positionOffset, positionOffsetPixels)
                    executorService.execute {
                        imageScroller.setOffsetRate((position + positionOffset) / ((viewPager2.adapter as RecyclerView.Adapter).itemCount - 1))
                    }
                }
            })

        }
    }

}

最后再贴一下MainActivity的代码

MainActivity.kt

import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager2.widget.ViewPager2

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstancestate: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        supportActionBar?.hide()

        val viewpager1 = findViewById<ViewPager2>(R.id.viewpager1)
        viewpager1.adapter = ViewPagerAdapter(4)
        val imageScroller1 = ImageScroller(findViewById<ImageView>(R.id.imageView1), R.drawable.color_clouds)
        BindUtils.bindWithViewPager2(viewpager1, imageScroller1)

        val viewpager2 = findViewById<ViewPager2>(R.id.viewpager2)
        viewpager2.adapter = ViewPagerAdapter(4)
        val imageScroller2 = ImageScroller(findViewById<ImageView>(R.id.imageView2), R.drawable.image_long)
        BindUtils.bindWithViewPager2(viewpager2, imageScroller2)

    }
}

activity_main.XMl

<?xML version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width=";match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <RelativeLayout
            android:layout_marginHorizontal="80dp"
            android:layout_marginVertical="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

        <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/imageView1"/>

        <androidx.viewpager2.widget.ViewPager2
                android:orientation="horizontal"
                android:id="@+id/viewpager1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
        />

    </RelativeLayout>

    <RelativeLayout
            android:layout_marginHorizontal="80dp"
            android:layout_marginVertical="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

        <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/imageView2"/>

        <androidx.viewpager2.widget.ViewPager2
                android:orientation="vertical"
                android:id="@+id/viewpager2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
        />

    </RelativeLayout>

</LinearLayout>

实现出来的效果：

【Android】炫酷ui 带你做一个背景跟着滚动的工具

【Android】炫酷ui 带你做一个背景跟着滚动的工具

 原理其实很简单，就是监听ViewPager2的滑动，根据滑动百分比来设置图片的偏移。核心代码就两个文件：ImageScroller.kt和BindUtils.kt，demo我已经上传到码云上了。

本项目地址：ImageScroller

脚本宝典总结

以上是脚本宝典为你收集整理的【Android】炫酷ui 带你做一个背景跟着滚动的工具全部内容，希望文章能够帮你解决【Android】炫酷ui 带你做一个背景跟着滚动的工具所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：bitmapjavaphppython参数参数工具工具开发开发程序员程序员
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程