Android視差效果實現的水平滾動控制項

Android開發技術不斷進步，現在越來越多的應用需要使用更加複雜的滾動控制項。水平滾動控制項是其中一個非常適合實現視差效果的控制項。視差效果讓應用產生立體感、層次感，更加吸引用戶的眼球，提升用戶體驗。本文將介紹如何使用視差效果實現水平滾動控制項。

一、基本布局

實現水平滾動控制項，需要使用RecyclerView控制項。我們需要先定義一個布局作為RecyclerView的item。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="horizontal">

    <ImageView
        android:id="@+id/ivImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher"/>
    
</LinearLayout>

該布局中包含一個ImageView控制項，布局將寬度設置為match_parent，使得ImageView的寬度是屏幕的寬度。ImageView的高度由其內容決定，可以根據需要設置為固定值。

二、RecyclerView設置

接下來，我們需要在代碼中設置RecyclerView。

首先，我們需要設置RecyclerView的LayoutManager為LinearLayoutManager，並設置其方向為horizontal。

RecyclerView recyclerView = findViewById(R.id.recyclerView);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
recyclerView.setLayoutManager(layoutManager);

然後，我們需要創建一個Adapter，並將其設置給RecyclerView。

MyAdapter myAdapter = new MyAdapter();
recyclerView.setAdapter(myAdapter);

MyAdapter是我們自定義的一個Adapter類，稍後我們會講到。

三、Adapter實現

現在我們需要實現自定義的Adapter類MyAdapter。

MyAdapter需要繼承RecyclerView.Adapter類，並實現RecyclerView.ViewHolder類。

在MyAdapter中，我們可以定義一個List存放需要展示的數據，以及一個Map存放每個item中ImageView在屏幕中的位置。

private List<Integer> mData = new ArrayList<>();
private Map<View, Integer> mViewPositions = new HashMap<>();

public MyAdapter() {
    for (int i = 0; i < 10; i++) {
        mData.add(R.drawable.ic_launcher);
    }
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image, parent, false);
    return new MyViewHolder(view);
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
    holder.setImage(mData.get(position));
    mViewPositions.put(holder.itemView, position);
}

@Override
public int getItemCount() {
    return mData.size();
}

class MyViewHolder extends RecyclerView.ViewHolder {
    private ImageView mImageView;
    
    MyViewHolder(View itemView) {
        super(itemView);
        mImageView = itemView.findViewById(R.id.ivImage);
    }
    
    void setImage(int resId){
        mImageView.setImageResource(resId);
    }
}

在onCreateViewHolder方法中，我們需要載入布局文件並返回MyViewHolder實例。在onBindViewHolder方法中，我們需要設置ImageView的圖片，並將ViewHolder與位置對應起來。getItemCount方法返回RecyclerView展示的item數目。

在MyViewHolder類中，我們主要是定義了一個ImageView控制項，以及setImage方法設置ImageView的圖片。

四、實現視差效果

現在我們已經實現了一個簡單的水平滾動控制項，接下來我們需要添加視差效果。

我們可以在RecyclerView的onScrolled方法中實現視差效果。

onScrolled方法會在RecyclerView滾動時被調用，在方法中，我們可以獲取到RecyclerView的位置，計算出ImageView在屏幕中的位置，並根據其位置設置ImageView的透明度。

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    for (View view : mViewPositions.keySet()) {
        int position = mViewPositions.get(view);
        float viewX = view.getX();
        float x = viewX + recyclerView.getX();
        float screenWidth = recyclerView.getWidth();
        float center = screenWidth / 2f;
        float offset = Math.abs(center - x);
        float range = screenWidth / 2f + view.getWidth() / 2f;
        if (offset < range) {
            float alpha = 1f - offset / range;
            view.setAlpha(alpha);
        } else {
            view.setAlpha(0f);
        }
    }
}

在該方法中，我們首先遍歷所有的item，計算出ImageView在屏幕中的位置x，並計算出屏幕中心點到ImageView中心點的距離offset。根據距離計算ImageView的透明度，並設置給ImageView。

完成以上步驟後，我們就實現了Android視差效果實現的水平滾動控制項。

完整代碼如下：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(layoutManager);

        MyAdapter myAdapter = new MyAdapter();
        recyclerView.setAdapter(myAdapter);

        recyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
            @Override
            public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
                return false;
            }

            @Override
            public void onTouchEvent(RecyclerView rv, MotionEvent e) {}

            @Override
            public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {}
        });

        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                for (View view : mViewPositions.keySet()) {
                    int position = mViewPositions.get(view);
                    float viewX = view.getX();
                    float x = viewX + recyclerView.getX();
                    float screenWidth = recyclerView.getWidth();
                    float center = screenWidth / 2f;
                    float offset = Math.abs(center - x);
                    float range = screenWidth / 2f + view.getWidth() / 2f;
                    if (offset < range) {
                        float alpha = 1f - offset / range;
                        view.setAlpha(alpha);
                    } else {
                        view.setAlpha(0f);
                    }
                }
            }
        });
    }

    private List<Integer> mData = new ArrayList<>();
    private Map<View, Integer> mViewPositions = new HashMap<>();

    class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
        public MyAdapter() {
            for (int i = 0; i < 10; i++) {
                mData.add(R.drawable.ic_launcher);
            }
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image, parent, false);
            return new MyViewHolder(view);
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            holder.setImage(mData.get(position));
            mViewPositions.put(holder.itemView, position);
        }

        @Override
        public int getItemCount() {
            return mData.size();
        }

        class MyViewHolder extends RecyclerView.ViewHolder {
            private ImageView mImageView;

            MyViewHolder(View itemView) {
                super(itemView);
                mImageView = itemView.findViewById(R.id.ivImage);
            }

            void setImage(int resId){
                mImageView.setImageResource(resId);
            }
        }
    }
}