自定义控件（20）---自定义控件之高仿猫眼小项目（2）

项目的源码在   高仿猫眼项目连载(1)--->底部Tab栏切换实现 可以下载

继续回到上篇  高仿猫眼项目连载(1)--->底部Tab栏切换实现

底部Tab每个按钮各对应一个fragment界面，接下来先看简单的界面，点击Tab键的影院进行影院界面的加载--这个界面主要是了解自定义属性的使用哦

主要是一个自定义属性和include的思想，如果想要让自定义属性发挥到极致去看我的fragment界面吧，

这里有4个界面fragment，所以有必要抽取一个公共的fragment界面

BaseFragment

package com.dandy.weights.baseWeights;import android.app.Activity;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public abstract class BaseFragment extends Fragment{//fragment依赖的activitypublic Activity mActivity;//加载器public LayoutInflater mInflater;//每个fragment返回一个view视图public View rootView;//是否销毁public boolean isDestroyView = false;/** * 在其中初始化 fragment 的基础组件们 */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);this.mActivity = getActivity();this.mInflater = LayoutInflater.from(mActivity);}/** * 在这里返回view视图 */@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {//加载视图setContentView(container);//初始化控件initView();//初始化数据bindData();return rootView;}@Overridepublic void onDestroyView() {isDestroyView = true;super.onDestroyView();}/** * 让子类去根据自己的情况去实现各自的视图 * @param container */public abstract void setContentView(ViewGroup container);public abstract void initView();public abstract void bindData();}

1、基类的fragment抽取完毕，接下里看影院界面的布局文件吧，其实就是长这个样子的，只不过分为2部分

fragment_cinema_layout.xml

<?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" >        <include layout="@layout/fragment_cinema_top_layout"/><include layout="@layout/fragment_cinema_btn_layout"/></LinearLayout>

2、由于其他的界面头部展现也不一样，所以头部那个titleBar也是利用include包含进来需要的布局，这个又分为3部分，因为发现界面不需要左右两边的搜索和猫眼字样，需要什么就include进来什么

fragment_cinema_top_layout.xml

<?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="@dimen/title_height"    android:background="@color/background_bg1"    android:paddingLeft="@dimen/inner_padding_size"    android:paddingRight="@dimen/out_padding_size" >    <include layout="@layout/top_left_flag" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="@string/cinema"        android:textColor="@color/textcolor_white_a"        android:textSize="@dimen/tab_logo_size" />    <include layout="@layout/top_right_search" /></RelativeLayout>

3、看左边的猫眼字样的布局，里面有textview和imageview实现

top_left_flag.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/current_location"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:layout_centerVertical="true"    android:background="@drawable/selector_click_color"    android:gravity="center_vertical"    android:orientation="horizontal"    android:paddingLeft="@dimen/inner_padding_size"    android:paddingRight="@dimen/inner_padding_size" >    <TextView        android:id="@+id/location"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:focusable="false"        android:gravity="center_vertical"        android:text="@string/app_name"        android:textColor="@color/textcolor_white_a"        android:textSize="@dimen/title_text_size" />    <ImageView        android:layout_width="20dp"        android:layout_height="20dp"        android:background="@drawable/top_cascading_n"        android:focusable="false"        android:scaleType="centerInside" /></LinearLayout>

4、右边的布局

top_right_search.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/search"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:layout_alignParentRight="true"    android:gravity="center_vertical"    android:orientation="horizontal"    android:paddingLeft="@dimen/inner_padding_size"    android:paddingRight="@dimen/inner_padding_size" >    <ImageView        android:layout_width="22dp"        android:layout_height="22dp"        android:background="@drawable/top_search_n"        android:focusable="false"        android:scaleType="centerInside" /></LinearLayout>

5、接下来看下半部分的布局吧

fragment_cinema_btn_layout.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:dandy="http://schemas.android.com/apk/res/com.demo.dandy"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:focusable="false"    android:gravity="center_horizontal"    android:orientation="horizontal"    android:paddingTop="@dimen/activity_vertical_margin" >    <com.dandy.weights.SelectedButton        android:id="@+id/cinema_all"        android:layout_width="@dimen/btn_width"        android:layout_height="@dimen/btn_height"        android:background="@drawable/shape_rect_01_1"        android:focusable="false"        android:gravity="center"        android:text="@string/all"        android:textColor="@color/textcolor_white_a"        android:textSize="@dimen/title_text_size_02"        dandy:background_normal="@drawable/shape_rect_01"        dandy:background_select="@drawable/shape_rect_01_1" />    <com.dandy.weights.SelectedButton        android:id="@+id/cinema_select_seat"        android:layout_width="@dimen/btn_width"        android:layout_height="@dimen/btn_height"        android:background="@drawable/shape_rect_02"        android:focusable="false"        android:gravity="center"        android:text="@string/select_seat"        android:textColor="@color/textcolor_red_d"        android:textSize="@dimen/title_text_size_02"        dandy:background_normal="@drawable/shape_rect_02"        dandy:background_select="@drawable/shape_rect_02_1" />    <com.dandy.weights.SelectedButton        android:id="@+id/cinema_purchase"        android:layout_width="@dimen/btn_width"        android:layout_height="@dimen/btn_height"        android:background="@drawable/shape_rect_03"        android:focusable="false"        android:gravity="center"        android:text="@string/group_purchase"        android:textColor="@color/textcolor_red_d"        android:textSize="@dimen/title_text_size_02"        dandy:background_normal="@drawable/shape_rect_03"        dandy:background_select="@drawable/shape_rect_03_1" />    <com.dandy.weights.ImageTextView        android:id="@+id/select_cinema"        android:layout_width="@dimen/btn_width2"        android:layout_height="@dimen/btn_height"        android:layout_marginLeft="@dimen/activity_horizontal_margin"        dandy:background_normals="@drawable/shape_rect_04"        dandy:background_selects="@drawable/shape_rect_04_1"        dandy:image_normal="@drawable/ic_cinema_select_unpress"        dandy:image_select="@drawable/ic_cinema_select_press"        dandy:image_width="15dp"        dandy:image_height="15dp"        android:padding="@dimen/line_width" /></LinearLayout>

先贴出一个举例吧 全部那个选项正常状态下的显示

shape_rect_01.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle" >    <corners        android:bottomLeftRadius="@dimen/corner"        android:topLeftRadius="@dimen/corner" />    <stroke android:color="@color/textcolor_red_d"        android:width="@dimen/line_width" /></shape>

shape_rect_01_1.xml 按下的状态

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle" >    <corners        android:bottomLeftRadius="@dimen/corner"        android:topLeftRadius="@dimen/corner" />    <solid android:color="@color/textcolor_red_d" />    <stroke        android:width="@dimen/line_width"        android:color="@color/textcolor_red_d" /></shape>

接下来看上面3个button---全部。选座。团购的自定义属性

  <declare-styleable name="SelectButton">        <attr name="background_normal" format="reference"/>        <attr name="background_select" format="reference"/>    </declare-styleable>

接下来看筛选的自定义属性

    <declare-styleable name="ImageTextView">        <attr name="background_normals" format="reference"/>        <attr name="background_selects" format="reference"/>        <attr name="image_normal" format="reference"/>        <attr name="image_select" format="reference"/>        <attr name="image_width" format="dimension"/>        <attr name="image_height" format="dimension"/>    </declare-styleable>

接下来是时候贴出自定义控件的代码了，先看3个button的代码吧

SelectedButton

package com.dandy.weights;import com.dandy.interfaces.ViewClickListener;import com.demo.dandy.R;import android.annotation.SuppressLint;import android.content.Context;import android.content.res.Resources;import android.content.res.TypedArray;import android.util.AttributeSet;import android.view.Gravity;import android.view.MotionEvent;import android.view.View;import android.widget.Button;import android.view.View.OnTouchListener;@SuppressLint("ClickableViewAccessibility")public class SelectedButton extends Button implements OnTouchListener{private int normalTextColor,pressedTextColor;private int normalBack,pressedBack;private ViewClickListener mListener;/** * 三个构造函数 * @param context */public SelectedButton(Context context) {this(context, null);}public SelectedButton(Context context, AttributeSet attrs) {this(context, attrs, 0);}public SelectedButton(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init(attrs);}/** * 进行初始化 * @param attrs */private void init(AttributeSet attrs){//获取res类Resources res = getContext().getResources();//红色normalTextColor = res.getColor(R.color.textcolor_red_d);//白色pressedTextColor = res.getColor(R.color.textcolor_white_a);TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.SelectButton);normalBack = ta.getResourceId(R.styleable.SelectButton_background_normal, -1);pressedBack = ta.getResourceId(R.styleable.SelectButton_background_select, -1);ta.recycle();this.setGravity(Gravity.CENTER);this.setOnTouchListener(this);}@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:this.setTextColor(pressedTextColor);if(pressedBack != -1){this.setBackgroundResource(pressedBack);}break;case MotionEvent.ACTION_UP:if(mListener != null){mListener.onHandsUp(this);}break;}return true;}public void setNormalState(){this.setTextColor(normalTextColor);if(normalBack != -1){this.setBackgroundResource(normalBack);}}public void setViewClickListener(ViewClickListener listener){this.mListener = listener;}}

ImageTextView

package com.dandy.weights;import com.dandy.interfaces.ViewClickListener;import com.demo.dandy.R;import android.annotation.SuppressLint;import android.content.Context;import android.content.res.Resources;import android.content.res.TypedArray;import android.text.TextUtils.TruncateAt;import android.util.AttributeSet;import android.util.TypedValue;import android.view.Gravity;import android.view.MotionEvent;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import android.view.View.OnTouchListener;/** *左边是图片flag，右边显示文字  */@SuppressLint("ClickableViewAccessibility")public class ImageTextView extends LinearLayout implements OnTouchListener{private int normalTextColor,pressedTextColor;private int normalBack,pressedBack;private int normalImg,pressImg;private ImageView imageView;private TextView textView;private Resources res;private ViewClickListener mListener;private int imageWidth,imageHeight;/** * 构造函数 */public ImageTextView(Context context) {this(context, null);}public ImageTextView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public ImageTextView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init(attrs);addImg();addTextView();}/** * 初始化自定义属性 * @param attrs */private void init(AttributeSet attrs){//获取res资源目录res = getContext().getResources();//normalTextColor = res.getColor(R.color.textcolor_red_d);pressedTextColor = res.getColor(R.color.textcolor_white_a);this.setGravity(Gravity.CENTER);this.setOrientation(LinearLayout.HORIZONTAL);this.setFocusable(true);this.setFocusableInTouchMode(true);TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.ImageTextView);normalBack = ta.getResourceId(R.styleable.ImageTextView_background_normals, -1);pressedBack = ta.getResourceId(R.styleable.ImageTextView_background_selects, -1);normalImg = ta.getResourceId(R.styleable.ImageTextView_image_normal, -1);pressImg = ta.getResourceId(R.styleable.ImageTextView_image_select, -1);imageWidth = ta.getDimensionPixelSize(R.styleable.ImageTextView_image_width, LayoutParams.WRAP_CONTENT);imageHeight = ta.getDimensionPixelSize(R.styleable.ImageTextView_image_height, LayoutParams.WRAP_CONTENT);ta.recycle();this.setOnTouchListener(this);if(normalBack != -1){setBackgroundResource(normalBack);}}private void addImg(){imageView = new ImageView(getContext());imageView.setFocusable(false);imageView.setLayoutParams(new LayoutParams(imageWidth,imageHeight));if(normalImg != -1){imageView.setBackgroundResource(normalImg);}this.addView(imageView);}private void addTextView(){textView = new TextView(getContext());LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);params.leftMargin = res.getDimensionPixelSize(R.dimen.mine_margin);textView.setTextColor(normalTextColor);textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, res.getDimensionPixelSize(R.dimen.title_text_size_02));textView.setText(res.getString(R.string.select));textView.setSingleLine(true);textView.setEllipsize(TruncateAt.END);textView.setFocusable(false);this.addView(textView);}@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:if(pressedBack != -1){setBackgroundResource(pressedBack);}if(pressImg != -1){imageView.setBackgroundResource(pressImg);}textView.setTextColor(pressedTextColor);break;case MotionEvent.ACTION_UP:if(mListener != null){mListener.onHandsUp(this);}break;}return true;}public void setNormalState(){if(normalBack != -1){setBackgroundResource(normalBack);}if(normalImg != -1){imageView.setBackgroundResource(normalImg);}textView.setTextColor(normalTextColor);}public void setViewClickListener(ViewClickListener listener){this.mListener = listener;}}

CinemaFragment 接下来终于可以看fragment的代码了

package com.demo.dandy.fragments;import android.content.res.Resources;import android.view.View;import android.view.ViewGroup;import com.dandy.interfaces.ViewClickListener;import com.dandy.weights.ImageTextView;import com.dandy.weights.SelectedButton;import com.dandy.weights.baseWeights.BaseFragment;import com.demo.dandy.R;public class CinemaFragment extends BaseFragment implements ViewClickListener{private SelectedButton cinemaAll,selectSeat,purchase;private ImageTextView selectCinema;private View lastSelectView;//全部，选座，团购按下时候的字体颜色--白色private int pressedTextColor;@Overridepublic void setContentView(ViewGroup container) {Resources res = getActivity().getResources();//全部，选座，团购按下时候的字体颜色--白色pressedTextColor = res.getColor(R.color.textcolor_white_a);//返回一个rootViewrootView = mInflater.inflate(R.layout.fragment_cinema_layout, container, false);}@Overridepublic void initView() {//全部cinemaAll = (SelectedButton) rootView.findViewById(R.id.cinema_all);//选座selectSeat = (SelectedButton) rootView.findViewById(R.id.cinema_select_seat);//团购purchase = (SelectedButton) rootView.findViewById(R.id.cinema_purchase);//筛选selectCinema = (ImageTextView) rootView.findViewById(R.id.select_cinema);//设置点击事件cinemaAll.setViewClickListener(this);selectSeat.setViewClickListener(this);purchase.setViewClickListener(this);selectCinema.setViewClickListener(this);//初始化默认，全部这个按钮是选中状态--字体为白色cinemaAll.setEnabled(true);cinemaAll.setTextColor(pressedTextColor);lastSelectView = cinemaAll;}@Overridepublic void bindData() {}@Overridepublic void onHandsUp(View v) {switch (v.getId()) {case R.id.cinema_all:setViewState(cinemaAll);break;case R.id.cinema_select_seat:setViewState(selectSeat);break;case R.id.cinema_purchase:setViewState(purchase);break;case R.id.select_cinema:setViewState(selectCinema);break;}}private void setViewState(View view){if(view != lastSelectView){if(!(view instanceof ImageTextView)){if(lastSelectView instanceof SelectedButton){SelectedButton btn = (SelectedButton) lastSelectView;btn.setNormalState();}lastSelectView = view;}}}}