android自定義組合控制元件圖片輪播+小圓點+點選跳轉廣告頁面
阿新 • • 發佈：2019-02-20
1.寫一個佈局,用於自定義組合控制元件
2.寫一個類繼承RelativeLayout,也就是自定義組合控制元件的類<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="200dp"> <!--圖片輪播--> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="200dp"></android.support.v4.view.ViewPager> <!--展示小圓點--> <LinearLayout android:id="@+id/llt" android:background="#999999" android:gravity="center" android:layout_alignParentBottom="true" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="40dp"></LinearLayout> </RelativeLayout>
3.小圓點的xml佈局背景 res右鍵Android resource filepublic class AutoBanner extends RelativeLayout { DianJi dianji; private ViewPager viewPager; private LinearLayout llt; private Myhandler h; public AutoBanner(Context context) { this(context,null); } public AutoBanner(Context context, AttributeSet attrs) { this(context, attrs,0); } public AutoBanner(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //將佈局繪製到控制元件 LayoutInflater inflater = LayoutInflater.from(context); View view = inflater.inflate(R.layout.mybanner, this, true); //通過id獲取控制元件 viewPager = view.findViewById(R.id.viewpager); llt = view.findViewById(R.id.llt); } //寫一個獲取資料的方法,同時獲取介面卡 public void setAdaper(Context context,List<com.bwie.zengxianglin1511j20180102.bean.DataBean> data){ Myadaper m=new Myadaper(context,data); viewPager.setAdapter(m); //寫一個集合用於放指示器,也就是小圓點 final List<ImageView> yuandian=new ArrayList(); //有多少圖片放幾個圓點 for (int i = 0; i < data.size(); i++) { ImageView yuan=new ImageView(context); //給圖片新增選中和未選中的狀態 yuan.setBackgroundResource(R.drawable.dot_drawable); //新增到集合 yuandian.add(yuan); //這是佈局引數,,剛開始小圓點之間沒有距離,所以使用java程式碼指定寬度高度,並且指定小圓點之間的距離 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); params.setMargins(5,0,5,0); //放到LinearLayout,也就是圓點佈局中 llt.addView(yuan,params); } //預設第一個選中 yuandian.get(0).setSelected(true); //給viewpager新增滑動監聽 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { position=position%yuandian.size(); for (int i = 0; i <yuandian.size(); i++) { //如果滑動的圖片下標等於圓點下標就是圓點選中 if(i==position){ yuandian.get(i).setSelected(true); }else{ //不等於就不選中 yuandian.get(i).setSelected(false); } } } @Override public void onPageScrollStateChanged(int state) { } }); //2.手動的可以無限滑動 可以左滑 viewPager.setCurrentItem(yuandian.size()*100000);//設定當前展示中間某個足夠大的位置 //設定自動輪播 h = new Myhandler(); autoPlay(); } private void autoPlay() { h.sendEmptyMessageDelayed(0,2000); } //自動輪播 class Myhandler extends Handler{ @Override public void handleMessage(Message msg) { super.handleMessage(msg); //顯示下一頁的訊息 viewPager.setCurrentItem(viewPager.getCurrentItem()+1); //再次傳送 h.sendEmptyMessageDelayed(0,2000); } } //介面卡 class Myadaper extends PagerAdapter{ Context con; List<com.bwie.zengxianglin1511j20180102.bean.DataBean> data; public Myadaper(Context con,List<com.bwie.zengxianglin1511j20180102.bean.DataBean> data){ this.con=con; this.data=data; } /** * viewPager具有預載入,預設的前後載入一頁,,,預設的容器裡面最多三頁 * @param container * @param position * @return */ @Override public Object instantiateItem(ViewGroup container, final int position) { //寫一個ImageView控制元件 ImageView iv=new ImageView(con); //給控制元件設定圖片 Glide.with(con).load(data.get(position%data.size()).getIcon()).into(iv); //新增到容器當中 container.addView(iv); //給imageView設定觸控的監聽事件,再點選的時候要暫停傳送 iv.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { switch (motionEvent.getAction()){ case MotionEvent.ACTION_DOWN://按下的時候應該取消傳送訊息的操作 h.removeCallbacksAndMessages(null); break; case MotionEvent.ACTION_MOVE://移動的動作 h.removeCallbacksAndMessages(null); break; case MotionEvent.ACTION_CANCEL://取消 h.sendEmptyMessageDelayed(0,2000); break; case MotionEvent.ACTION_UP://擡起的時候 h.sendEmptyMessageDelayed(0,2000); break; } return false; } }); //設定ImageView的點選事件,用於介面回撥傳值 iv.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { //因為是無線輪播,所以要魔除集合長度再能獲取正常下標 dianji.dian(position%data.size()); } }); //2.把當前展示的檢視返回 return iv; } @Override public void destroyItem(ViewGroup container, int position, Object object) { //銷燬檢視 container.removeView((View) object); } @Override public int getCount() { return Integer.MAX_VALUE;//設定成最大,無限輪播 } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } } //寫一個介面,用於ImageView點選事件 public interface DianJi{ void dian(int position); } //寫一個方法供外部訪問 public void fang(DianJi dianji){ this.dianji=dianji; } }
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/dot_select"></item> <item android:state_selected="false" android:drawable="@drawable/dot_no_select"></item> </selector>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="10dp" android:height="10dp"/>
<solid android:color="#fff"/>
</shape><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="10dp" android:height="10dp"/>
<solid android:color="#82B34E"/>
</shape>4.mainACtivity的佈局和應用
//佈局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="com.bwie.zengxianglin1511j20180102.MainActivity">
<com.bwie.zengxianglin1511j20180102.AutoBanner
android:id="@+id/myban"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></com.bwie.zengxianglin1511j20180102.AutoBanner>
</LinearLayout>//應用
public class MainActivity extends AppCompatActivity implements AutoBanner.DianJi{
private List<bean.DataBean> data;
private AutoBanner myban;
String url="https://www.zhaoapi.cn/ad/getAd";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//通過id獲取控制元件
myban = findViewById(R.id.myban);
//獲取資料
getDate();
//介面回撥
myban.fang(this);
}
private void getDate() {
//非同步請求資料
new MyAsyncTask().execute(url);
}
//實現介面,用於接收值
@Override
public void dian(int position) {
//type：返回0或1
//0 跳轉到Webview詳情頁
//1 Toast彈出提示“我要跳轉到商品詳情頁”
int type = data.get(position).getType();
if(type==0){
Intent in=new Intent(MainActivity.this,Main2Activity.class);
in.putExtra("url",data.get(position).getUrl());
startActivity(in);
}else if(type==1){
Toast.makeText(MainActivity.this,"我要跳轉到商品詳情頁", Toast.LENGTH_SHORT).show();
}
}
private class MyAsyncTask extends AsyncTask<String,Void,String>{
@Override
protected String doInBackground(String... strings) {
//調取工具類請求資料
return Util.tojson(strings[0]);
}
@Override
protected void onPostExecute(String s) {
super.onPostExecute(s);
//解析JSON
Gson g=new Gson();
bean bean = g.fromJson(s, bean.class);
data = bean.getData();
//調取自定義控制元件的方法,給自定義ViewPager新增資料
myban.setAdaper(MainActivity.this, data);
}
}
}//佈局
<android.support.constraint.ConstraintLayout 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="com.bwie.zengxianglin1511j20180102.Main2Activity"
>
//展示網頁
<WebView
android:id="@+id/mWebView"
android:layout_width="match_parent"
android:layout_height="wrap_content"></WebView>
</android.support.constraint.ConstraintLayout>public class Main2Activity extends AppCompatActivity {
WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
Intent intent = getIntent();
String url = intent.getStringExtra("url");
Toast.makeText(Main2Activity.this,url+"aaaa",Toast.LENGTH_LONG).show();
mWebView = (WebView) findViewById(R.id.mWebView);
mWebView.loadUrl(url);
mWebView.requestFocusFromTouch();
mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
/**覆蓋呼叫系統或自帶瀏覽器行為開啟網頁*/
mWebView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
view.loadUrl(url);
return true;
}
});
/**判斷載入過程*/
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
// TODO Auto-generated method stub
if (newProgress == 100) {
// 網頁載入完成
} else {
// 載入中
}
}
});
initListener();
}
private void initListener() {
/**開啟頁面時， 自適應螢幕*/
WebSettings webSettings = mWebView .getSettings();
webSettings.setUseWideViewPort(true);//設定此屬性，可任意比例縮放
webSettings.setLoadWithOverviewMode(true);
/**便頁面支援縮放*/
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);
}
}