Frescoベースの大図ブラウズ
先周は忙しい一周间で、一周间も进度を急いでいました.年越しが楽すぎたのかもしれません.今やっと暇があって座って、静かにこの忙しい後の収穫を考えています.ここでも振り返って、分かち合いましょう!
今日の内容は大図ブラウズの実装についてで、いろいろな実装方法が多いかもしれませんが、ここでは
Fresco
Feature
次はそのいくつかの際立った特性です をサポートする. をサポートする.
トランスポートゲート:Fresco
大図ブラウズ
依存の追加
通常のピクチャのロードを実現すれば、最初のピクチャをインポートすればよい.では、このような大きなコンポーネントを使って画像をロードすることができます.使用手順については、前に述べた円形の画像のような関連チュートリアルを見て簡単にできます.当初、私はまだ関連するライブラリを探して実現したと思っていましたが...
SimpleDraweeView
上は普通の画像に対して展示されているだけですが、今日のテーマではありません.次は基本的な使用コードです.
上の注釈が明らかになったと信じています
ZoomableView
現在は
インプリメンテーション
インタフェース
次は
これで大図ブラウズの効果が実現したのか、簡単ではないか、
効果図
プロジェクト転送ゲート:https://github.com/idisfkj/Zo...個人ブログ:https://idisfkj.github.io/arc...
に注目
今日の内容は大図ブラウズの実装についてで、いろいろな実装方法が多いかもしれませんが、ここでは
Fresco
に基づいて実装します.(実は主にプロジェクトで使われているのはFresco
です)Fresco
Fresco
を知らない人もいるかもしれませんが、ここでは簡単に紹介します.Fresco
はfacebook
が発売したオープンソースプロジェクトで、このプロジェクトは主にAndroid
ピクチャのロードを解決するために使用され、それは強力なピクチャのロードコンポーネントであり、それを使用した後、ピクチャのロードと表示の煩雑なイベントに関心を持つ必要はありません.画像App
に焦点を当てて使用することを強くお勧めします.Feature
次はそのいくつかの際立った特性です
Fresco
のうちImage Pipeline
は、ネットワーク、ローカルファイルシステム、ローカルリソースから画像をロードする責任を負い、最大の省スペースとCPU
時間、同時に3級キャッシュ(2級メモリ、1級ディスク)を含み、サムネイルと明瞭度の変換などFresco
のDrawees
は、画像のロードが完了する前のビットマップと画像が見えないときの解放を担当するとともに、円形画像の実現Fresco
は漸進的な画像表示をサポートし、Android
自体はサポートされていない.Fresco
はGif
とWebP
の動図を完璧にサポートし、フレームごとに大きな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...
に注目