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 生成的实体类
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
