How Android Loads Clear Long Graphs Using Glide

  • 2021-12-11 19:08:35
  • OfStack

Overview of directory Glide Use of Glide:

Recently, Glide was used to load pictures in the project. After going online, the user feedback pictures were blurred. After testing, it was found that when the user clicked on the super-long picture to enlarge, the pictures became blurred and looked down upon, which greatly affected the user experience. To solve this problem, we need to fully understand the use of Glide first.

Overview of Glide

Friends who use Glide3 always think that Glide 4 has changed a lot compared with Glide 3, but it is not. The reason why everyone has this illusion is that you directly moved the usage of Glide 3 to Glide 4, and as a result, IDE reported an error in an all-round way, and then everyone may think that the usage of Glide 4 has completely changed.

In fact, Glide 4 has not changed much compared with Glide 3, but you haven't understood its change rules yet. 1 Once you have mastered the rules of Glide 4, you will find that most of the usage of Glide 3 is still common to Glide 4.

After a general study of Glide 4, I found that Glide 4 is not a breakthrough upgrade, but more an optimization of API neatness. Compared with API of Glide 3, Glide 4 has been adjusted more scientifically and reasonably, which has improved the readability, writability and scalability. However, if you are already familiar with Glide 3, you don't have to switch to Glide 4, because all the functions that can be realized on Glide 4 can be realized on Glide 3, and Glide 4 has no improvement in performance. But for friends who are new to Glide, there is no need to learn Glide 3. It is the best choice to get started with Glide 4 directly.

Use of Glide:

1. Add dependencies:


implementation 'com.davemorrissey.labs:subsampling-scale-image-view:3.5.0' 
implementation 'com.github.bumptech.glide:glide:4.5.0'

2. The main program class uses:


public class MainActivity extends AppCompatActivity {
 private SubsamplingScaleImageView mageView;

 @SuppressLint("CheckResult")
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  String sUrl = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1532588239&di=78b4c6bde1cf9d1df89562241b547e72&src=http://p2.qhimg.com/t011fc13354f12d1a46.jpg";
  mageView = (SubsamplingScaleImageView) findViewById(R.id.imageview);
  mageView.setMinimumScaleType(SubsamplingScaleImageView.SCALE_TYPE_CUSTOM);
  mageView.setMinScale(1.0F);
  // Download pictures and save them locally 
  Glide.with(this).load(sUrl).downloadOnly(new SimpleTarget<File>() {
   @Override
   public void onResourceReady(File resource, GlideAnimation<? super File> glideAnimation) {
    //  Address the saved picture to SubsamplingScaleImageView, Pay attention to the settings here ImageViewState Set the initial display scale 
    mageView.setImage(ImageSource.uri(Uri.fromFile(resource)), new ImageViewState(2.0F, new PointF(0, 0), 0));
   }
  });
 }
}

3. Main program xml layout file


<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#E61b1919">

 <com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView
  android:id="@+id/imageview"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
</LinearLayout>

4. Add permissions


 <uses-permission android:name="android.permission.INTERNET"/>

5. Display an ultra-long diagram


  Glide.with(context).load(url).downloadOnly(new SimpleTarget<File>() {
   @Override
   public void onResourceReady(File resource, Transition<? super File> transition) {
    Uri uri = Uri.fromFile(resource);
    imageView.setImageURI(uri);
   }
  });

You can load the long graph here.

The above is how Android uses Glide to load clear long diagram details, more information about Android using Glide to load clear long diagram please pay attention to other related articles on this site!


Related articles: