使用HorizontalScrollView簡單實現柱狀圖

有個愛折騰的美工是個什麼體驗。。。那就是效果，也是，android也就是個UI,UI注重的是用戶體驗，良好的用戶體驗跟舒適的UI效果是分不開的。這次要做的效果就是，做完測試後提交的歷史記錄，以柱狀圖的形式呈現，那麼把這個父布局設置成HorizontalScrollView，把樹狀圖的滾動效果交給HorizontalScrollView，那麼問題來了，HorizontalScrollView只能有一個子布局，那麼就在這裡面嵌套一層最好用的LinearLayout，把它的子布局方向設置成horizontal水平，然後把一個個子View創建出來，add進來就可以了。其中的難點就是嵌套了3層，如何獲取子view，並監聽它們了。。。不難，看完真的就好簡單了。。。

1、按照我們的思路，我們寫好xml文件

act_historytest.xml




    

        
        
    

    

        
    




historyresult_item.xml




    

    

    

2、那麼問題來了，到我們的java文件看看

ChartFragment.java文件代碼如下

package com.example.chartdemo;

import java.util.ArrayList;
import java.util.List;

import com.example.chartdemo.R.color;
import com.example.chartdemo.R.drawable;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class ChartFragment extends Fragment implements OnClickListener {
    private View view;
    private LinearLayout mGallery;
    private LayoutInflater mInflater;
    private TextView main_content;
    private List count; // 分數
    private List times; // 日期
    private SparseArray mySparse;

    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // 動態加載布局
        view = inflater.inflate(R.layout.act_historytest, container, false);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initView();
        initData();
        setOnListener();
    }

    private void setOnListener() {
        if (mInflater == null)
            mInflater = LayoutInflater.from(getActivity());
        for (int i = 0; i < count.size(); i++) {
            View view = mInflater.inflate(R.layout.historyresult_item,
                    mGallery, false);
            ImageView img = (ImageView) view.findViewById(R.id.his_length);
            // 獲取圖片的大小，自定義設置圖片的高度
            LayoutParams params = img.getLayoutParams();
            params.height = count.get(i) * 4;
            img.setLayoutParams(params);
            TextView txt = (TextView) view.findViewById(R.id.his_date);
            TextView txtdate = (TextView) view.findViewById(R.id.his_count);
            txt.setText(times.get(i).toString());
            txtdate.setText(String.valueOf(count.get(i)));
            view.setId(i);// 設定view的id，把i設置成當前View的id
            view.setOnClickListener(this);//每一個子項目注冊監聽事件
            if (i == 0) {
                // 默認選中第一個
            img.setBackgroundResource(color.btn_login);
    txtdate.setBackgroundResource(drawable.select_result);
                txtdate.setTextColor(color.black);
            }
            mGallery.addView(view);
        }

    }

    private void initData() {
        // 測試數據
        mySparse = new SparseArray();
        count = new ArrayList();
        times = new ArrayList();
        for (int i = 10; i <= 90; i += 10) {
            mySparse.put(i, "2016-5-0" + i / 10);
            count.add(i);
            times.add("2016-5-0" + i / 10);
        }
    }

    private void initView() {
        mGallery = (LinearLayout) view.findViewById(R.id.id_history);
        main_content = (TextView) view.findViewById(R.id.situation_content);
    }
    /*注意這裡的mGallery是我們把自定義好的view後一個個add進來的
     *view容器，mGallery.getChildAt(v.getId())，剛好是以位置
     *進行排序add進來的，這裡獲取的id也就是上面的i
     */
    @Override
    public void onClick(View v) {
    // 至於這裡為什麼要用for循環的話。。。額，那就是是要做刷新，刷新整個視圖
        for (int i = 0; i < mGallery.getChildCount(); i++) {
            if (v.getId() == i) {
                // 獲取點擊的子視圖
                TextView txtdate = (TextView) mGallery.getChildAt(v.getId())
                        .findViewById(R.id.his_date);
                TextView txtcount = (TextView) mGallery.getChildAt(v.getId())
                        .findViewById(R.id.his_count);
                ImageView img = (ImageView) mGallery.getChildAt(v.getId())
                        .findViewById(R.id.his_length);
                img.setBackgroundResource(color.btn_login);
                txtcount.setBackgroundResource(drawable.select_result);
                txtdate.setTextColor(color.black);
                int count = Integer.parseInt(txtcount.getText().toString());
                if (count >= 80) {
                    main_content.setText(count + "分，非常健康");
                } else if (count >= 60) {
                    main_content.setText(count + "分，正常");
                } else {
                    main_content.setText(count + "分，不正常");
                }
            } else {
                // 獲取未點擊的視圖
                TextView txtdate = (TextView) mGallery.getChildAt(i)
                        .findViewById(R.id.his_date);
                TextView txtcount = (TextView) mGallery.getChildAt(i)
                        .findViewById(R.id.his_count);
                ImageView img = (ImageView) mGallery.getChildAt(i)
                        .findViewById(R.id.his_length);
                img.setBackgroundResource(color.grey);
        txtcount.setBackgroundResource(drawable.noselect_result);
                txtdate.setTextColor(color.white);
            }
        }
    }
}

3、然後就實現好了，然後同時，美工又默默地加了分頁效果，我特麼。。。還是忍了。那麼我們就用fragment吧，常說的碎片，最後在外面包裹一層Activity。。。

MainActivity.java中的代碼

package com.example.chartdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.view.Window;
import android.widget.ImageView;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainActivity extends FragmentActivity {
    private RadioGroup radTab;
    // 將fragment初始化為數組便於管理
    Fragment[] fragmentGroup = { new ChartFragment(), new ListFragment() };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_testrecord);
        initView();
        initData();
        setonListener();
    }
    private void setonListener() {
        // 點擊switch更換界面
        radTab.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                case R.id.rb_left:
                    setFragment(0);
                    break;
                case R.id.rb_right:
                    setFragment(1);
                    break;
                }
            }
        });
    }
    private void initData() {
        setFragment(0);// 默認在左邊
    }
    private void initView() {
        radTab = (RadioGroup) findViewById(R.id.rgb_switch);
    }
    // 顯示選中的fragment
    private void setFragment(int showId) {
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.record_content, fragmentGroup[showId]).commit();
    }

}

4、看下另一邊的listview,主要考量的就是圓角效果（corners），虛線效果(line)，描邊效果(stroke),實心效果（solid），也就是人們常說的用shape.xml文件對視圖進行美化

最主要的就是那個虛線效果了。。。不百度，真不清楚，還要關閉硬件加速才能顯示。。。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> shape_line.xml

上代碼：

ListFragment.java

package com.example.chartdemo;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class ListFragment extends Fragment {
    private View view;
    private ListView testListView;

    @Override
    @Nullable
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.act_historyverication, container,
                false);
        // 關閉activity的硬件加速功能，為了顯示虛線
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initView();
        initData();
        setListener();
    }

    private void setListener() {

    }

    private void initData() {
        List testL = new ArrayList();
        for (int i = 0; i < 10; i++) {
            testL.add(i + "");
        }
        testListView.setAdapter(new testAdapter(getActivity(),
                R.layout.historyverication_item, testL));
    }

    private void initView() {
        testListView = (ListView) view.findViewById(R.id.lvverication);
    }

}

最後，總結下，其實我有偷懶的地方，就是標頭那個切換其實是使用了xml文件中的selector進行圖片的切換，其實我第一反應是用tabHost的。。。但是無奈碎片橫行啊，fragment的使用。然後就是我年輕不懂事，沒用android自帶的圖表類庫，其實實現的方式挺簡單的，也很符合正常的邏輯。。。純手工，我給自己點贊