最近正在学习android,学到轮播图和TabBar这块,就试着集成下android中youth.banner以及FlycoTabLayout_Lib现写篇文章记录一下,也希望能指引跟我一样新学android的可以有一个捷径
首先在APP下的build.gradle目录中下载所需要的库
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'
implementation 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
implementation 'com.youth.banner:banner:1.4.10' //最新版本
implementation 'com.github.bumptech.glide:glide:3.7.0' //加载网络图片
}
第二步,在AndroidManifest.xml中添加网络请求权限
<uses-permission android:name="android.permission.INTERNET" />
image.png
第三步,在activity_main.xml中写tab的控件和容器
<?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"
android:orientation="vertical"
android:background="#ffffff"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"/>
<com.flyco.tablayout.CommonTabLayout
android:gravity="bottom"
app:tl_textUnselectColor="#cbcbcb"
app:tl_iconGravity="TOP"
android:background="#ffffff"
app:tl_textSelectColor="#e66123"
android:id="@+id/commonTabLayout"
android:layout_width="match_parent"
android:layout_gravity="bottom"
app:tl_indicator_height="0dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
第四步在MainActivity的Java文件中
public class MainActivity extends AppCompatActivity {
@BindView(R.id.viewpager)
ViewPager viewpager;
@BindView(R.id.commonTabLayout)
CommonTabLayout commonTabLayout;
private String[] title = {"游戏", "音乐", "电影", "棋牌", "休闲", "棋牌", "休闲"};
//R.drawable.home是放在drawable下的图片
private int[] iconUnSelect = {R.drawable.home, R.drawable.ear, R.drawable.home, R.drawable.home, R.drawable.home, R.drawable.home, R.drawable.home};
private int[] iconSelect = {R.drawable.home_pressed, R.drawable.ear_pressed, R.drawable.home_pressed, R.drawable.home_pressed, R.drawable.home_pressed, R.drawable.home_pressed, R.drawable.home_pressed,};
private ArrayList<Fragment> fragments = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
fragments.add(new TwoActivity());
fragments.add(new OneActivity());
fragments.add(new MyFragment());
viewpager.setAdapter(new MyFragmentPageAdapter(getSupportFragmentManager(), fragments));
ArrayList<CustomTabEntity> customTabEntityArrayList = new ArrayList<>();
for (int i = 0; i < 3; i++) {
final int temp = i;
customTabEntityArrayList.add(new CustomTabEntity() {
@Override
public String getTabTitle() {
return title[temp];
}
@Override
public int getTabSelectedIcon() {
return iconSelect[temp];
}
@Override
public int getTabUnselectedIcon() {
return iconUnSelect[temp];
}
});
}
commonTabLayout.setTabData(customTabEntityArrayList);
commonTabLayout.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelect(int position) {
viewpager.setCurrentItem(position);
}
@Override
public void onTabReselect(int position) {
}
});
//tabbar上的红点
// commonTabLayout.showMsg(0, 99);
}
}
这里面需要注意的重要几点!!!
① 在FlycoTabLayout_Lib下,引用XML中的控件不在是
btnShow = (Button) this.findViewById(R.id.btn_show);
而是
@BindView(R.id.btn_show)
Button btn_show;
② fragments.add(new MyFragment());这段代码,是将VC添加到容器中,这里的MyFragment必须继承Fragment 其Java代码为
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.myfragment_layout,container,false);
ButterKnife.bind(this, view);
return view;
}
③无论是MainActivity还是继承Fragment的Activity, ButterKnife.bind(this, view);这段代码一定要写,否者@BindView(R.id.btn_show) Button btn_show;的引用这为null,导致程序报错,这块是个坑
接下来是要创建轮播图啦,我是在activity_Two写的,首先
<?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:orientation="vertical">
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="240dp" />
</LinearLayout>
然后在TwoActivity中
public class TwoActivity extends Fragment {
@BindView(R.id.banner)
Banner banner;
private List<String> listBanner;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.activity_two,container,false);
ButterKnife.bind(this, view);
listBanner=new ArrayList<String>();
listBanner.add("http://img1.3lian.com/2015/w7/85/d/101.jpg");
listBanner.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic21363tj30ci08ct96.jpg");
listBanner.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic259ohaj30ci08c74r.jpg");
listBanner.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2b16zuj30ci08cwf4.jpg");
listBanner.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2e7vsaj30ci08cglz.jpg");
banner.setImages(listBanner).setImageLoader(new GlideImageLoader()).start();
return view;
}
}
集成轮播图还是特别简单的,不过这里还要最后一个知识点,也是坑了我半天的问题,那就是在Android8.1下就没问题,但是在Android9.0下,图片显示不出来,只显示出了page点,打印台打印
No Network Security Config specified, using platform default
这个问题是Android9.0以后的请求谷歌要就必须是HTTPS,解决办法就是
在 res 下新增一个 xml 目录，然后创建一个名为：network_security_config.xml 文件
image.png
文件中写
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>
<!--手动允许开启http请求-->
在AndroidManifest.xml文件下的application标签增加属性
android:networkSecurityConfig="@xml/network_security_config"
image.png
完美搞定,由于我是iOS开发学的Android,所以有些词是iOS的名词用在Android中,不正确的地方欢迎指正,接受批评,欢迎大家评论发表意见,觉得写的不错点个赞就好
