一個Android上的以滑動揭示的方式顯示並切換圖片的View


SlideView是一個Android上的以滑動揭示的方式顯示並切換圖片的View,以視覺對比的方式把一套相似的圖片展示出來。

示例

  • 翻頁圖片揭示效果:

特性

  • 設置一組(List<ImageInfo>)待加載的圖片(本地圖片,網絡圖片),通過(ImageLoader)庫加載出圖片並按List的順序顯示圖片。

  • 通過手勢識別(GestureDetector),判斷用戶手指往左或者往右滑動,根據滑動位移揭開和蓋上圖片,當手指松開時,根據滑動速度和滑動位移的距離決定是翻頁,還是滑回當前頁。

  • 翻頁或滑回時通過ScrollerCompat來計算並畫出平滑動畫,在規定時間內平滑過度。

  • 繼承自View,可在xml布局文件中使用,也可以java代碼使用。

  • 在View的onDraw方法中畫出當前要顯示的圖片,文字(名字)和指示器。

源碼:

使用方法

  1. 布局中定義SlideImageView:

    <?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:background="@android:color/darker_gray"
        >
    
        <com.homg.slideview.SlideImageView
            android:id="@+id/main_siv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            app:indicatorColor="#FF0000FF"
            app:indicatorRadius="5dp"
            app:nameTextColor="#FF0000FF"
            app:nameTextSize="26sp"
            app:textMargin="5dp"
            />
    </RelativeLayout>
    
  2. 設置SlideImageView,設置圖片源,和圖片切換監聽器:

    public class MainActivity extends AppCompatActivity {
        private static final String TAG = MainActivity.class.getSimpleName();
        private SlideImageView mSlideImageView;
        private String[] urls = new String[]{"assets://test_1.jpg", "assets://test_2.jpg",
                "assets://test_3.jpg",
                "assets://test_4.jpg",
                "assets://test_5.jpg"};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            ImageLoaderConfiguration configuration = ImageLoaderConfiguration
                    .createDefault(this);
            ImageLoader.getInstance().init(configuration);
            setContentView(R.layout.activity_main);
            mSlideImageView = (SlideImageView) findViewById(R.id.main_siv);
            mSlideImageView.setOnSlideImageListener(new         SlideImageView.OnSlideImageListener() {
                @Override
                public void onShowImage(int index, SlideImageView.ImageInfo imageInfo) {
                    Log.i(TAG, String.format("index=%d,image info=%s", index, imageInfo));
                }
            });
            List<SlideImageView.ImageInfo> imageInfoList = new ArrayList<>(5);
            for (int i = 0; i < urls.length; i++) {
                SlideImageView.ImageInfo tempInfo = new SlideImageView.ImageInfo(urls[i], "Image-" + i);
                imageInfoList.add(tempInfo);
            }
            mSlideImageView.setImageInfos(imageInfoList);
        }
    }
    
  3. build.gradle中加入ImageLoader的依賴:

    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
    }
    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM