初探android 整合輪播圖、FlycoTabLayout_Lib以及安卓9.0的網路問題

摘要： 最近正在學習android,學到輪播圖和TabBar這塊,就試著整合下android中youth.banner以及FlycoTabLayout_Lib現寫篇文章記錄一下,也希望能指引跟我一樣新學android的可以有一個捷徑 首先在APP下的build.gradle目錄中下載所需要的庫 ...

最近正在學習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" />

第三步,在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( ofollow,noindex">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 檔案

檔案中寫

<?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"

完美搞定,由於我是iOS開發學的Android,所以有些詞是iOS的名詞用在Android中,不正確的地方歡迎指正,接受批評,歡迎大家評論發表意見,覺得寫的不錯點個贊就好

生命不息,程式碼不止!碼農一枚,請多點贊