preface

As a novice, I always want to do something after learning the basics. So I tried to emulate the good open source stuff. Copycat work: The LookLook open source project went through some twists and turns and learned how to write the copycat process.

It actually took me about three days to figure everything out, but with experience I can do it in an hour.

Using frames:

Rxjava and Retrofit as well as an open source extension of RecyclerView and the annotations framework ButterKnife collectively rely on the following:

dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') androidTestCompile (' com. Android. Support. The test. The espresso: espresso - core: 2.2.2', {exclude group: 'com.android.support', module: 'support - annotations'}) compile' com. Android. Support: appcompat - v7:24.2.1 'compile' com. Android. Support: design: 24.2.1 ' TestCompile 'junit: junit: 4.12 / / rely on the comment / / rely on adding the compile' com. Jakewharton: butterknife: 8.4.0 apt 'com. Jakewharton: butterknife - compiler: 8.4.0' compile 'com. Google. Code. Gson: gson: 2.7' / / advanced recyclerview compile 'com. Jude: easyrecyclerview: holdings' compile' com. Android. Support: recyclerview - v7:24.2.0 '/ / rxjava compile 'com. Squareup. Retrofit2: retrofit - converters: 2.1.0' compile 'com. Squareup. Retrofit2: converter - gson: 2.1.0' compile 'the IO. Reactivex: rxandroid: 1.2.1' compile 'com. Squareup. Retrofit2: adapter - rxjava: 2.1.0' compile 'com. Squareup. Retrofit2: retrofit: 2.1.0' compile 'com. Squareup. Retrofit2: converter - scalars: 2.1.0' compile 'com. Making. Bumptech. Glide: glide: 3.7.0'}Copy the code

Start making app

Interface making:

To create a new project, choose template —-> Adjust template




QQ screenshots 20161025085115. PNG

Adjust the menu

It can be seen that there are two files in menu, one is the main menu, which is displayed on Toobar, and the other is the drawer menu, which can be modified as needed. activity_main_drawer.xml




    

        
        
        
        
    

    
        
            
            
        
    

Copy the code

In addition to menu, there is an upper part of the drawer, which can set the head picture and signature. nav_header_main.xml




    

    

    

Copy the code

That’s about it. All that’s left is to dynamically add fragement to the FragLayout.

Data acquisition

Start by creating fragment_news. You only need one layout fileEasyRecyclerViewCan be

Add the dependent

/ / advanced recyclerview compile 'com. Jude: easyrecyclerview: holdings' compile' com. Android. Support: recyclerview - v7:24.2.0 'Copy the code


    
Copy the code

Get JSON data using RXJava and RetroFIT

My data comes from nature data and I just need to register to get the APIKEY. Data request core code:

Create a request interface for Retrofit

public interface ApiService{
    @GET("social/")
    Observable  getNewsData(@Query("key")String key,@Query("num") String num,@Query("page") int page);Copy the code

Notice that it’s returning Gson data and it’s set to “observed”

Data acquisition function:

private void getData() { Log.d("page", page + ""); Retrofit retrofit = new Retrofit.Builder() .baseUrl("http://api.tianapi.com/") //String AddConverterFactory (ScalarsConverterFactory. The create ()). AddConverterFactory (GsonConverterFactory. The create ()) / / add the json converter / / the compile 'com. Squareup. Retrofit2: adapter - rxjava: 2.1.0'. AddCallAdapterFactory (RxJavaCallAdapterFactory. The create ()) / / added RxJava adapter.build (); ApiService apiManager = retrofit.create(ApiService.class); Apimager. getNewsData(" your APIKREY", "10", page) .subscribeOn(Schedulers.io()) .map(new Func1>() { @Override public List call(NewsGson newsgson) { // List newsList  = new ArrayList(); for (NewsGson.NewslistBean newslistBean : newsgson.getNewslist()) { News new1 = new News(); new1.setTitle(newslistBean.getTitle()); new1.setCtime(newslistBean.getCtime()); new1.setDescription(newslistBean.getDescription()); new1.setPicUrl(newslistBean.getPicUrl()); new1.setUrl(newslistBean.getUrl()); newsList.add(new1); } return newsList; / / return type}}). ObserveOn (AndroidSchedulers. MainThread ()). The subscribe (new Subscriber > () {@ Override public void onNext (the List  newsList) { adapter.addAll(newsList); } @Override public void onCompleted() { } @Override public void onError(Throwable e) { Toast.makeText(getContext(), "Network connection failed ", toast.length_long).show(); }}); page = page + 1; }Copy the code
  1. Initiate web requests using Retrofit
  2. Data is submitted via RXJava in the IO thread and returned to the main thread
  3. Set the map transform to convert the resulting Gson class to the desired News class (you can omit this step)
  4. Subscribe’s onNext processes the final data returned.

About creating Gson classes

Gson is Google’s Json processing package, adding dependencies. The compile ‘com. Google. Code. Gson: gson: 2.7’ with plug-in: GsonFormat can quickly through the json data to establish the corresponding class.




my.gif

Data binding to recyview

Since we use recyview, which is expanded, it’s very easy to use. Specific use to the author of githuaEasyRecyclerView

  1. The Adapter inherits a Recycle Adapter and returns its own ViewHolder

    public class NewsAdapter extends RecyclerArrayAdapter { public NewsAdapter(Context context) { super(context); } @Override public BaseViewHolder OnCreateViewHolder(ViewGroup parent, int viewType) { return new NewsViewHolder(parent); }}Copy the code
  2. ViewHolder
public class NewsViewHolder extends BaseViewHolder { private TextView mTv_name; private ImageView mImg_face; private TextView mTv_sign; public NewsViewHolder(ViewGroup parent) { super(parent,R.layout.news_recycler_item); mTv_name = $(R.id.person_name); mTv_sign = $(R.id.person_sign); mImg_face = $(R.id.person_face); } @Override public void setData(final News data) { mTv_name.setText(data.getTitle()); mTv_sign.setText(data.getCtime()); Glide.with(getContext()) .load(data.getPicUrl()) .placeholder(R.mipmap.ic_launcher) .centerCrop() .into(mImg_face); }}Copy the code

3. Set the recycleview

recyclerView.setAdapter(adapter = new NewsAdapter(getActivity())); recyclerView.setLayoutManager(new LinearLayoutManager(getActivity())); // add SpaceDecoration itemDecoration = new SpaceDecoration((int) pixutil.convertdptopixel (8, getContext())); itemDecoration.setPaddingEdgeSide(true); itemDecoration.setPaddingStart(true); itemDecoration.setPaddingHeaderFooter(false); recyclerView.addItemDecoration(itemDecoration); // Load adapter.setmore (r.layout.view_more, new RecyclerArrayAdapter.OnMoreListener() { @Override public void onMoreShow() { getData(); } @Override public void onMoreClick() { } }); / / write refresh event recyclerView. SetRefreshListener (new SwipeRefreshLayout. OnRefreshListener () {@ Override public void onRefresh () {  recyclerView.postDelayed(new Runnable() { @Override public void run() { adapter.clear(); page = 0; getData(); }}, 1000); }}); / / click event adapter. SetOnItemClickListener (new RecyclerArrayAdapter. OnItemClickListener () {@ Override public void onItemClick(int position) { ArrayList data = new ArrayList(); data.add(adapter.getAllData().get(position).getPicUrl()); data.add(adapter.getAllData().get(position).getUrl()); Intent intent = new Intent(getActivity(), NewsDetailsActivity.class); Bundle = new Bundle(); bundle.putStringArrayList("data", data); intent.putExtras(bundle); startActivity(intent); }});Copy the code

Glide network picture loading library

A library focused on smooth image loading:

Depend on: the compile ‘com. Making. Bumptech. Glide: glide: 3.7.0’

Basic use:

Glide.with(mContext).load(path).asgif ().override(300, 300) .diskCacheStrategy(DiskCacheStrategy.SOURCE) .placeholder(R.drawable.progressbar) .thumbnail(1f) .error(R.drawable.error) .transform(new MyBitmapTransformation(mContext,10f)) .into(iv);Copy the code

News Details page

Layout: Use CoordinatorLayout to pull up toolbar compression animation.




    

        

            

            
        
    

    

        
    
Copy the code

CoordinatorLayout+AppBarLayout Animation for the Toolbar in CollapsingToolbarLayout




my.gif

The Imgview above loads the image, and the WebView below loads the article content

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_news_detail); SetTitle (" tool.setTitle "); setSupportActionBar(toolbar); / / set the return arrow getSupportActionBar (). SetDisplayHomeAsUpEnabled (true); toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { onBackPressed(); }}); = this.getintent ().getextras (); / / receive the name value final ArrayList data = bundle. GetStringArrayList (" data "); Log.d("url", data.get(0)); webText.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // TODO Auto-generated method stub view.loadUrl(url); return true; }}); webText.loadUrl(data.get(1)); Glide.with(this) .load(data.get(0)).error(R.mipmap.ic_launcher) .fitCenter().into(ivImage); }Copy the code

This is basically it: finally add the fragment dynamically

If (id == r.i.nav_camera) {// Handle the camera action NewsFragment fragment=new NewsFragment(); FragmentManager fragmentManager=getSupportFragmentManager(); FragmentTransaction transaction=fragmentManager.beginTransaction(); transaction.replace(R.id.fragment_container,fragment); transaction.commit(); }Copy the code

Effect test:




my.gif




my.gif

Conclusion:

It just barely works, and there are a lot of details that haven’t been optimized. Then we must continue to study.

Added: About the use of ButterKnife

Framework imports: Search dependent Butterknife imports:

dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') testCompile' junit: junit: 4.12 'compile' com. Android. Support: appcompat - v7:24.2.0 '/ / rely on adding the compile 'com. Jakewharton: butterknife: 8.4.0'}Copy the code

How to use it: Note that I wrote version 8.40 here, which is different from the previous version. If ButterKnife is 8.01 or above You need to add the following contents: 1. The classpath ‘com. Neenbedankt. Gradle. Plugins: android – apt: 1.8’

Dependencies buildscript {repositories {jcenter ()} {the classpath 'com. Android. View the build: gradle: 2.1.2' classpath 'com. Neenbedankt. Gradle. Plugins: android - apt: 1.8' / / NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } }Copy the code

2.apply plugin: 'com.neenbedankt.android-apt'

apply plugin: 'com.android.application'
apply plugin: 'com.neenbedankt.android-apt'Copy the code

3. Apt ‘com. Jakewharton: butterknife – compiler: 8.4.0’

dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') testCompile' junit: junit: 4.12 'compile' com. Android. Support: appcompat - v7:24.2.0 '/ / rely on adding the compile 'com. Jakewharton: butterknife: 8.4.0 apt' com. Jakewharton: butterknife - compiler: 8.4.0 '}Copy the code

Android ButterKnife Zelezny is a lazy plugin for Using the ButterKnife annotation framework in Android Studio.




my.gif

Tip: Move the mouse over the layout file name.

The document has been sent to Github—github.com/HuRuWo/YiLa…