仿微信右上角彈出框以及ListView的使用

    由於這個APP的需求分析中有一個可以導入本地書籍的功能，這個功能放在哪裏？看了宜搜小說這些閱讀APP，它們都是模仿微信右上角點擊彈出一個小的彈出框，然後進行選項的選擇。大題圖如下：

                                        

實現這個功能採用的方式是使用PopupWindow。至於每本書籍顯示則是採用ListView。

1、右上角彈出框

        在進行實現PopupWindwo的功能前，要實現彈出後彈出框的界面佈局，這裏新建一個佈局文件的xml。只有先建好，後續工作才能進行。

       因爲這個界面的頂部導航欄和其他三個不同，所以這裏要寫的代碼都是在第一個類的Fragement，我取得名字是books。在這裏PopupWindow不能直接使用，需要使用一個類來集成它然後重新構造一個實列化方法，以便到達我們想要的界面。

//定義右上角彈窗類
    public class BookWindow extends PopupWindow{
        public BookWindow(Context context){
            super(context);
            setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);//設置彈出框的高度
            setWidth(280);//設置彈出框的高度
            setOutsideTouchable(true);//設置是否可以點擊彈出框外面而使彈出框消失
            setFocusable(false);//設置是否一開始就顯示彈出框
            setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.popupWindow)));//設置背景顏色
            View contentView = LayoutInflater.from(context).inflate(R.layout.book_popupwindow,
                    null, false);//設置背景的佈局文件
            setContentView(contentView);
        }
    }

      BookWindow的類創建以後，需要獲取父層的contentView的大小，不然可能會使彈出框的大小不像我們想象的樣子。

//    獲取contentView的大小
    @SuppressWarnings("ResourceType")
    private static int makeDropDownMeasureSpec(int measureSpec){
        int mode;
        if (measureSpec == ViewGroup.LayoutParams.WRAP_CONTENT) {
            mode = View.MeasureSpec.UNSPECIFIED;
        } else {
            mode = View.MeasureSpec.EXACTLY;
        }
        return View.MeasureSpec.makeMeasureSpec(View.MeasureSpec.getSize(measureSpec), mode);
    }

       對於彈出框的基本聲明已經完成，接下來就需要進行一定的設置。

//    初始化右上角彈出框
    public void initPopupWindow(){
        BookWindow mWindow =new BookWindow(this.getContext());
        View contentView=mWindow.getContentView();
        contentView.measure(makeDropDownMeasureSpec(mWindow.getWidth()),makeDropDownMeasureSpec(mWindow.getHeight()));
        int offsetX = Math.abs(mWindow.getContentView().getMeasuredWidth()-category.getWidth()) / 2;
        int offsetY = 20;
        TextView textView1=(TextView)contentView.findViewById(R.id.exchang_layout);
        TextView textView2=(TextView)contentView.findViewById(R.id.import_book);
        TextView textView3=(TextView)contentView.findViewById(R.id.edit_book);
        textView1.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                Log.i("111", "九宮格顯示");
            }
        });
        textView2.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                Log.i("222", "導入本地書籍");
            }
        });
        textView3.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                Log.i("333","編輯書架");
            }
        });

        PopupWindowCompat.showAsDropDown(mWindow, category, offsetX, offsetY, Gravity.START);
    }

    這樣基本上就完成了，但是不要忘記將上面的這個初始化方法綁定到右上角的那個觸動按鈕的點擊事件中。

2、使用ListView展示多跳數據

    在上圖中是多個書籍信息顯示，在這裏面是使用了BaseAdapter來做的適配器，此外在這個裏面使用了ViewHolder類，之所以使用ViewHolder的方法是爲了進一步的優化ListView減少耗時的作用，可以將要加載的子View放在ViewHolder類，當第一次創建convetView時將這些控件找出，在第二次重用convertView時就可以直接通過convertView中的getTag()方法獲得控件。具體代碼如下：

 //listView的適配器
    class MyBaseAdapter extends BaseAdapter{
        @Override
        public int getCount(){
            return names.length;
        }
        @Override
        public Object getItem(int position){
            return names[position];
        }
        @Override
        public long getItemId(int position){
            return position;
        }
        @Override
        public View getView(int position,View convertView,ViewGroup parent){
            ViewHolder holder;

            if(convertView==null){
                convertView= LayoutInflater.from(context).inflate(R.layout.book_booklist,parent,false);
                holder=new ViewHolder();
                holder.smartImageView=(SmartImageView)convertView.findViewById(R.id.item_image);
                holder.TextView1=(TextView)convertView.findViewById(R.id.book_title);
                holder.TextView2=(TextView)convertView.findViewById(R.id.book_author);
                holder.TextView3=(TextView)convertView.findViewById(R.id.book_source);
                holder.TextView4=(TextView)convertView.findViewById(R.id.book_info);
                holder.TextView5=(TextView)convertView.findViewById(R.id.book_readDate);
                convertView.setTag(holder);
            }else{
                holder=(ViewHolder)convertView.getTag();
            }
//            holder.mTextView.setText(temp[position]);
//            Article temp=articleLists.get(position);

//            holder.smartImageView.setImageUrl(temp.getImage());
            holder.TextView1.setText(names[position]);
            holder.TextView2.setText("江南");
            holder.TextView3.setText("本地書籍");
            holder.TextView4.setText("899章/992章");
            holder.TextView5.setText("10小時前看過");

            return convertView;
        }
        class ViewHolder{
            SmartImageView smartImageView;
            TextView TextView1;
            TextView TextView2;
            TextView TextView3;
            TextView TextView4;
            TextView TextView5;
        }
    }

       然後在最開始的地方，獲取ListView並設置適配器爲上面類的一個對象。這裏不得不說聲，因爲這個地方是在Fragement裏面所寫的，所以和Activity裏面的有些不同，在上面的getView（）方法中的View類型的參數convertView和convertView獲取時用的一個參數context。這兩個必須在Fragement的onCreateCiew的方法中進行賦值，這個值其實最外層的Activity，即在這個方法使用getActivity（）賦值。只有這樣才能進行接下來的操作。

       到此就完成了書庫的一部分界面（可能後面會有所修改）。