1. 參考資料
NOspy的http://www.itdecent.cn/p/333f7feeb842
Screenshot_20181106-221940.jpg
2. 主界面結(jié)構(gòu)
image.png
- 標題欄
- Banner
- RecycleView
3. 標題欄實現(xiàn)
ToolBar的使用
- AppBarLayout使用：手動添加implementation'com.android.support:design:27.1.1'
在ToolBar外面包裹AppBarLayout。
4. RecycleView實現(xiàn)
-
ItemView
image.png - 重寫 RecyclerView.Adapter
private List<NewsInfo.StoryBean> mStoryList;
private Context mContext;
private OnItemClickListner mOnItemClickListner;
//傳入?yún)?shù)：list和context
public StoryAdapter(List<NewsInfo.StoryBean> storyList,Context context) {...}
@NonNull
@Override
//繪制Item_view.xml得到View,并傳遞給ViewHolder
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {...}
@Override
//通過position獲得數(shù)據(jù)對象，并將數(shù)據(jù)加載到ViewHolder持有的View中
public void onBindViewHolder(@NonNull final ViewHolder holder, int position) {...}
@Override
public int getItemCount() {...}
//ViewHolder用來持有View中的子控件，避免每次執(zhí)行findViewById()
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView mImageView;
TextView mTextView;
public ViewHolder(View itemView) {
super(itemView);
mImageView = itemView.findViewById(R.id.story_image);
mTextView = itemView.findViewById(R.id.story_title);
}
}
5. Banner使用
https://github.com/youth5201314/banner
- 重寫GlideImageLoader
public class GlideImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
Glide.with(context).load(path).into(imageView);
}
}
- 在activity中new,set,start
mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE)
.setImageLoader(new GlideImageLoader())
.setImages(imageUrls)
.setBannerTitles(titles); //banner樣式有title才能顯示
mBanner.start();
6. 點擊跳轉(zhuǎn)到具體的story
- RecyclerView點擊事件
//在mAdapter中寫一個有點擊方法的內(nèi)部接口。
public interface OnItemClickListner {
void onItemClick(View view,int position);
}
//通過一個方法添加接口對象
private OnItemClickListner mOnItemClickListner;
public void setOnItemClickListner(OnItemClickListner onItemClickListner) {
mOnItemClickListner = onItemClickListner;
}
//在onBindViewHolder（）中實現(xiàn)Item_view中控件的點擊事件，在OnClick（）方法中調(diào)用接口的方法
holder.mTextView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getLayoutPosition();
mOnItemClickListner.onItemClick(holder.mTextView,position);
}
});
- 獲取Story數(shù)據(jù)
學著BiliBili客戶端封裝了NetUtil，只要是OKhttp的單例模式實現(xiàn)，和Retrofit的配置
public class RetrofitHelper {
private static OkHttpClient mOkHttpClient;
static { initOkhttpClient(); }
private static void initOkhttpClient() {
if(mOkHttpClient == null) {
synchronized (RetrofitHelper.class) {
if(mOkHttpClient == null) {
mOkHttpClient = new OkHttpClient.Builder()
.connectTimeout(5, TimeUnit.SECONDS)
.build();
...}
public static <T>T createApi(Class<T> T) {
Retrofit retrofit = new Retrofit.Builder()
.client(mOkHttpClient)
.baseUrl("http://news-at.zhihu.com/api/4/")
.addConverterFactory(GsonConverterFactory.create())
.addCallAdapterFactory(RxJava2CallAdapterFactory.create())
.build();
return retrofit.create(T);
}
}
7.StoryLayout結(jié)構(gòu)
-
這里偷懶直接用了demo的布局，但是toolbar沒寫好，先空著
image.png
8.Story數(shù)據(jù)的顯示
Webview加載js代碼：
-
String2xml工具類，這里有很多String的處理，先copy了...
image.png
9.效果圖
image.png
image.png
