Frescoベースの大図ブラウズ


先周は忙しい一周间で、一周间も进度を急いでいました.年越しが楽すぎたのかもしれません.今やっと暇があって座って、静かにこの忙しい後の収穫を考えています.ここでも振り返って、分かち合いましょう!
今日の内容は大図ブラウズの実装についてで、いろいろな実装方法が多いかもしれませんが、ここではFrescoに基づいて実装します.(実は主にプロジェクトで使われているのはFrescoです)
Fresco Frescoを知らない人もいるかもしれませんが、ここでは簡単に紹介します.Frescofacebookが発売したオープンソースプロジェクトで、このプロジェクトは主にAndroidピクチャのロードを解決するために使用され、それは強力なピクチャのロードコンポーネントであり、それを使用した後、ピクチャのロードと表示の煩雑なイベントに関心を持つ必要はありません.画像Appに焦点を当てて使用することを強くお勧めします.
Feature
次はそのいくつかの際立った特性です
  • FrescoのうちImage Pipelineは、ネットワーク、ローカルファイルシステム、ローカルリソースから画像をロードする責任を負い、最大の省スペースとCPU時間、同時に3級キャッシュ(2級メモリ、1級ディスク)を含み、サムネイルと明瞭度の変換など
  • をサポートする.
  • FrescoDraweesは、画像のロードが完了する前のビットマップと画像が見えないときの解放を担当するとともに、円形画像の実現
  • をサポートする.
  • Frescoは漸進的な画像表示をサポートし、Android自体はサポートされていない.
  • FrescoGifWebPの動図を完璧にサポートし、フレームごとに大きなBitmapの悩みを簡単に解決します.

  • トランスポートゲート:Fresco
    大図ブラウズ
    依存の追加Frescoに基づいている以上、Frescoの関連依存パケットは、実装前に自然に導入される.
    compile 'com.facebook.fresco:fresco:1.0.0'
    compile 'com.facebook.fresco:animated-gif:1.0.0'
    compile 'com.facebook.fresco:animated-webp:1.0.0'
    compile 'com.facebook.fresco:webpsupport:1.0.0'

    通常のピクチャのロードを実現すれば、最初のピクチャをインポートすればよい.では、このような大きなコンポーネントを使って画像をロードすることができます.使用手順については、前に述べた円形の画像のような関連チュートリアルを見て簡単にできます.当初、私はまだ関連するライブラリを探して実現したと思っていましたが...
    SimpleDraweeView
    上は普通の画像に対して展示されているだけですが、今日のテーマではありません.次は基本的な使用コードです.
    private void displayImage(SimpleDraweeView draweeView, String url) {
            GenericDraweeHierarchy hierarchy = draweeView.getHierarchy();
            //     
            if (hierarchy == null) {
                hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                        .setPlaceholderImage(getResources().getDrawable(R.mipmap.ic_launcher)
                                , ScalingUtils.ScaleType.CENTER).build();
                draweeView.setHierarchy(hierarchy);
            } else {
                hierarchy.setPlaceholderImage(getResources().getDrawable(R.mipmap.ic_launcher)
                        , ScalingUtils.ScaleType.CENTER);
            }
     
            //  ImageRequestBuilder,    Uri
            ImageRequestBuilder requestBuilder = ImageRequestBuilder.newBuilderWithSource(Uri.parse(url));
            //  Controller
            DraweeController controller = Fresco.newDraweeControllerBuilder()
                    .setOldController(draweeView.getController())
                    .setImageRequest(requestBuilder.build())
                    .build();
            //    ,Fresco          Controller   
            draweeView.setController(controller);
        }

    上の注釈が明らかになったと信じています
    ZoomableView
    現在はAppで、中に画像の展示があれば、基本的に画像閲覧という機能があることを知っています.大図ブラウズでは、スケール、ドラッグ、ダブルクリックで拡大をサポートする必要があります.FrescoオリジナルのSimpleDraweeViewはこれらの機能をサポートしていないので、ここでは別のコントロールZoomableViewを使用します.もちろん、Fresco公式に提供されています.私たちが今しなければならないのは、私たちのプロジェクトにアクセスすることです.前のトランスポートドアにはZoomableViewが見つかります.しかし、Frescoプロジェクトの集合体なので、この文章の最後に抽出した関連コードを提供します.
    インプリメンテーション
    インタフェースZoomableActivityを作成します.レイアウトの大きな図を参照するにはViewPagerが欠かせません.ここではViewPagerをあまり紹介しません.ZoomableActivityコードに直接アクセスします.
    public class ZoomableActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
        private static final String EXTRA_ZOOMABLE_PATHS = "extra_zoomable_paths";
        private static final String EXTRA_ZOOMABLE_INDEX = "extra_zoomable_index";
     
        private ViewPager mViewPager;
        private TextView mZoomableIndex;
        private ArrayList mPaths;
        private int mIndex;
     
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.zoommable_activity);
            getExtraData();
            initView();
            setupViewPager();
        }
     
        private void getExtraData() {
            mPaths = getIntent().getStringArrayListExtra(EXTRA_ZOOMABLE_PATHS);
            mIndex = getIntent().getIntExtra(EXTRA_ZOOMABLE_INDEX, 0);
        }
     
        private void initView() {
            mViewPager = (ViewPager) findViewById(R.id.view_pager);
            mZoomableIndex = (TextView) findViewById(R.id.zoomable_index);
        }
     
        private void setupViewPager() {
            mViewPager.setAdapter(new ZoomableViewPagerAdapter(this, mPaths));
            mViewPager.setCurrentItem(mIndex);
            mZoomableIndex.setText(mIndex + 1 + "/" + mPaths.size());
            mViewPager.addOnPageChangeListener(this);
        }
     
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
        }
     
        @Override
        public void onPageSelected(int position) {
            mZoomableIndex.setText(position + 1 + "/" + mPaths.size());
        }
     
        @Override
        public void onPageScrollStateChanged(int state) {
     
        }
     
        public static void goToPage(Context context, ArrayList paths, int index) {
            Intent intent = new Intent(context, ZoomableActivity.class);
             intent.putStringArrayListExtra(EXTRA_ZOOMABLE_PATHS, paths);
            intent.putExtra(EXTRA_ZOOMABLE_INDEX, index);
            context.startActivity(intent);
        }
    }

    次はAdapterです.主に画像の表示です.私のところはViewPagerなので、PagerAdapterを使用しています.コアコードはinstantiateItemの方法です.
    @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = LayoutInflater.from(mContext).inflate(R.layout.zoomable_view_pager_item, null);
            ZoomableDraweeView zoomableDraweeView = (ZoomableDraweeView) view.findViewById(R.id.zoomable_image);
            //       
            zoomableDraweeView.setAllowTouchInterceptionWhileZoomed(true);
            //  
            zoomableDraweeView.setIsLongpressEnabled(false);
            //        
            zoomableDraweeView.setTapListener(new DoubleTapGestureListener(zoomableDraweeView));
    
            DraweeController draweeController = Fresco.newDraweeControllerBuilder()
                    .setUri(mPaths.get(position))
                    .build();
            //    
            zoomableDraweeView.setController(draweeController);
            container.addView(view);
            view.requestLayout();
            return view;
        }

    これで大図ブラウズの効果が実現したのか、簡単ではないか、ZoomableViewを借りて、インタラクティブな展示ロジックを実現すればOkになる.
    効果図
    プロジェクト転送ゲート:https://github.com/idisfkj/Zo...個人ブログ:https://idisfkj.github.io/arc...
    に注目