TabLayout +ViewPager+Fragment + RecycleView + webView加载本地html

1,  使用TabLayout实现页面的导航切换

2, 实现ViewPager + Fragment ,切换页面, 2个Fragment;

3, 第一个Fragment中,  获取网络数据,展示到RecyclerView

地址:  http://m2.qiushibaike.com/article/list/suggest?page=1

解析字段:  id,  content

4, 控件的初始化,通过ButterKnife初始化控件

5,   第二个Fragment中,通过webView展示本地assets文件夹中的js.html页面,点击实现和js的交互

代码实例:

导入jar包

compile 'com.android.support:design:26.0.0-alpha1'compile 'com.android.support:recyclerview-v7:25.3.1'compile 'com.jakewharton:butterknife:8.8.1'compile 'com.jakewharton:butterknife-compiler:8.8.1'

目录结构:

一, 页面:

main_activity.html

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="bw.com.bw_day21.MainActivity">    <android.support.design.widget.TabLayout        android:layout_width="match_parent"        android:layout_height="60dp"        android:id="@+id/tab_layout_id"/>    <android.support.v4.view.ViewPager        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/vp_id"        android:layout_below="@id/tab_layout_id"        /></RelativeLayout>

fragment_my_fragment01.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="bw.com.bw_day21.MyFragment01">    <android.support.v7.widget.RecyclerView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/rv_id"/></FrameLayout>

fragment_my_fragment02.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="bw.com.bw_day22.MyFragment02">    <!--如果有需要, 实现点击按钮, 暂时js中的内容则添加  start-->    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/but_id"        android:text="点击按钮, 弹出内容"/>    <!--end-->

    <WebView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/web_view_id"/></LinearLayout >

rv_item.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="wrap_content">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="ID"        android:textSize="20sp"        android:id="@+id/tv01_id"/>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="内容"        android:textSize="20sp"        android:id="@+id/tv02_id"        android:layout_marginTop="10dp"/>    <!--分割线-->    <View        android:layout_width="match_parent"        android:layout_height="2dp"        android:background="@color/colorAccent"        android:layout_margin="10dp"        /></LinearLayout>

代码:

MyApp.java

public class MyApp extends Application {    @Override    public void onCreate() {        super.onCreate();        //初始化xUtils        x.Ext.init(this);        x.Ext.setDebug(true);    }}

在清单文件中, <application android:name = ".MyApp"/>引入

在清单文件中, 添加网络权限, 和读写sd卡的权限

MainActivity.java

public class MainActivity extends AppCompatActivity {     //导航    //使用ButterKnife注解    @BindView(R.id.tab_layout_id)     TabLayout mTb;   private List<String> titles;    //内容    //使用ButterKnife注解    @BindView(R.id.vp_id)     ViewPager mVp;    private List<Fragment> data;    private MyAdapter adapter;    Unbinder unbinder ;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //绑定ButterKnife         unbinder = ButterKnife.bind(this);        //构建标题        titles = new ArrayList<>();        titles.add("第一页");        titles.add("第二页");        //构建数据源        data = new ArrayList<>();        data.add(new MyFragment01());        data.add(new MyFragment02());        //构建适配器        adapter = new MyAdapter(getSupportFragmentManager());        mVp.setAdapter(adapter);        //将tabLayout 和ViewPager 绑定到一起        mTb.setupWithViewPager(mVp);    }//TODO 自定义ViewPager 的适配器    class MyAdapter extends FragmentPagerAdapter    {        public MyAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return data.get(position);        }        @Override        public int getCount() {            return data.size();        }        @Override        public CharSequence getPageTitle(int position) {            return titles.get(position);        }    }    @Override    protected void onDestroy() {        super.onDestroy();        //解绑        unbinder.unbind();    }}

MyFragment01.java

public class MyFragment01 extends Fragment {    //使用ButterKnife注解    @BindView(R.id.rv_id)     RecyclerView mRv;//控件    private List<Qsbk.ItemsBean> dataBean;    private MyRecycleViewAdapter adapter;    private Unbinder unbinder;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View  view = inflater.inflate(R.layout.fragment_my_fragment01, container, false);        //绑定       unbinder = ButterKnife.bind(this,view);        //设置RecycleView显示的布局        LinearLayoutManager manager = new LinearLayoutManager(getContext(),LinearLayoutManager.VERTICAL,false);        mRv.setLayoutManager(manager);        //TODO 通过xUtils 获取数据        RequestParams params = new RequestParams("http://m2.qiushibaike.com/article/list/suggest?page=1");        x.http().get(params, new Callback.CommonCallback<String>() {            @Override            public void onSuccess(String result) {                //TODO 得到数据源                Qsbk qsbk = new Gson().fromJson(result,Qsbk.class);                dataBean = qsbk.getItems();                //TODO 初始化适配器                adapter = new MyRecycleViewAdapter(getContext(),dataBean);                mRv.setAdapter(adapter);            }            @Override            public void onError(Throwable throwable, boolean b) {}            @Override            public void onCancelled(CancelledException e) {}            @Override            public void onFinished() { }        });        return view;    }    @Override    public void onDestroyView() {        super.onDestroyView();        //解绑        unbinder.unbind();    }}

MyRecycleViewAdapter.java

public class MyRecycleViewAdapter extends RecyclerView.Adapter<MyRecycleViewAdapter.ViewHolder> {    private Context context;    private List<Qsbk.ItemsBean> data;    public MyRecycleViewAdapter(Context context, List<Qsbk.ItemsBean> data)    {        this.context = context;        this.data = data;    }    @Override    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        //TODO 绑定页面        View view = LayoutInflater.from(context).inflate(R.layout.rv_item,parent,false);        ViewHolder viewHolder = new ViewHolder(view);        return viewHolder;    }    @Override    public void onBindViewHolder(ViewHolder holder, int position) {        //赋值        holder.tv1.setText(data.get(position).getId()+"");       holder.tv2.setText(data.get(position).getContent());    }    @Override    public int getItemCount() {        return data.size();    }    class ViewHolder extends RecyclerView.ViewHolder    {        //使用ButterKnife注解        @BindView(R.id.tv01_id)        TextView tv1;        @BindView(R.id.tv02_id)        TextView tv2;        public ViewHolder(View itemView) {            super(itemView);            //绑定            ButterKnife.bind(this,itemView);        }    }}

MyFragment02.java

public class MyFragment02 extends Fragment {    //使用ButterKnife注解    @BindView(R.id.web_view_id)     WebView mVb;    private String url = "file:///android_asset/js.html";    private Unbinder unbinder;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_my_fragment02, container, false);        //绑定        unbinder = ButterKnife.bind(this,view);        //TODO 加载地址        mVb.loadUrl(url);        //TODO 设置在当前App中显示        mVb.setWebViewClient(new WebViewClient(){            @Override            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {                //系统默认会打开系统浏览器去打开网页，为了要显示在自己的webview中必须设置这个属性                view.loadUrl(url);                return super.shouldOverrideUrlLoading(view, request);            }        });        //TODO 设置支持js        WebSettings webSettings = mVb.getSettings();        webSettings.setJavaScriptEnabled(true);

//TODO -----如果有需要, 实现点击按钮, 暂时js中的内容则添加  start//如果想要弹出窗口则写入下面的设置webSettings.setJavaScriptCanOpenWindowsAutomatically(true);mWebView.setWebChromeClient(new WebChromeClient(){    @Override    public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {        AlertDialog.Builder builder = new AlertDialog.Builder(getContext());        builder.setIcon(R.mipmap.ic_launcher);        builder.setTitle("显示Js的内容");        builder.setMessage(message);        builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {            @Override            public void onClick(DialogInterface dialog, int which) {                result.confirm();            }        });        builder.show();        return true;    }});//TODO -----end ------

return view; } @Override public void onDestroyView() { super.onDestroyView(); //解绑 unbinder.unbind(); }

//TODO -----如果有需要, 实现点击按钮, 暂时js中的内容则添加  start@OnClick(R.id.but_id)public void onClick(View view){    mWebView.loadUrl("javascript:callJs()");}//TODO -----end

} 

Qsbk.java  --  gsonFormat 生成的实体类