Change view. Change the look of the interface

    Not so long ago, wandering around the Internet, I came across a wonderful site with design patterns for android. A great site - a lot of useful tips on how to make the interface more user friendly, but there is one big “BUT” that I did not like. Climbing the entire site, I did not find any links to the implementation of at least one pattern. And it’s not that it is extremely difficult to think and write an application, guided by this pattern, but much faster, because laziness is differently more pleasant to look at and use the existing one. And for beginner android developers, life becomes easier when you see what can be done and how to do it. Therefore, I decided that it would be nice to write tutorials on these patterns. And let's start, not claiming the ultimate truth, withthis one , that is, from the very first!



    So, we will implement this using LayoutInflater. On the page with the pattern, an example is the file manager with ListView and GridView. Here we use them. Accordingly list.xml:


    and grid.xml (in which we will make 4 columns for gravity and set gravity to center):



    Oh yes, we’ll also separately create objects for our View in order to simplify our life as much as possible. So list_item.xml:



    and grid_item.xml:



    Well, now you can start the Activity (we will not touch main.xml). Since we use design patterns, we try to respect the users of our application, and accordingly, we need to remember their choice so that we do not have to configure the interface with every login. To do this, use SharedPreferences and make two methods:

    private void SavePreferences(String key, String value) {
    	    SharedPreferences sharedPreferences = getPreferences(MODE_PRIVATE);
    	    SharedPreferences.Editor editor = sharedPreferences.edit();
    	    editor.putString(key, value);
    	    editor.commit();
    	}
    private String LoadPreferences(String key) {
    	    SharedPreferences sharedPreferences = getPreferences(MODE_PRIVATE);
    	    String loadedString = sharedPreferences.getString(key, "list");	    
    	    return loadedString;
    	}
    


    Now we need to create a ViewGroup that will store our View (it would be nice to create the View itself; you could write “Views”, but I really don’t like it when these terms are translated, so I’d better write in English). We will not create a separate object for LayoutInflater, since the android documentation does not recommend us to do this (justifying this by the fact that in the context of our Activity it has already been created and correctly configured, that is, it remains only to get an instance). Accordingly, we will put such a cat in the onCreate method:

            setContentView(R.layout.main);
            content = new String[] {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"};
            viewGroup = (ViewGroup) findViewById(R.id.mainLayout);        
            list =  getLayoutInflater().inflate(R.layout.list, null);       
        	grid = getLayoutInflater().inflate(R.layout.grid, null);
            if(LoadPreferences("VIEW").equalsIgnoreCase("list"))
            	setList();
            else
            	setGrid(); 
    


    Now let's talk about setList () and setGrid (). Since we will have to dynamically update our interface in the future, I created separate methods for this:

    private void setList()
        {
        	viewGroup.removeAllViews();
        	viewGroup.addView(list); 
            ListView listView = (ListView) list.findViewById(R.id.listLayout);
        	listView.setAdapter(new ArrayAdapter(this, R.layout.list_item, R.id.textItem, content));
        }
    private void setGrid()
        {
        	viewGroup.removeAllViews();
        	viewGroup.addView(grid);
        	GridView gridview = (GridView) findViewById(R.id.gridLayout);
            gridview.setAdapter(new ArrayAdapter(this, R.layout.grid_item, R.id.gridButton, content));
        }
    


    Wow! You can try to run the application! It is working! But it would be nice now to add a switch, for which, in fact, the article was written. We do this through the menu, which is called up when the hardkey is pressed. This is what menu.xml looks like:



    And so the methods for working in our Activity (both methods return true, instead of performing superclass operations, since we defined our interface and set our own actions):

            @Override
    	public boolean onCreateOptionsMenu(Menu menu) {
    		// TODO Auto-generated method stub
    		MenuInflater inflater = getMenuInflater();
                    inflater.inflate(R.menu.menu, menu);
                    return true;
    	}
    	@Override
    	public boolean onOptionsItemSelected(MenuItem item) {
    		// TODO Auto-generated method stub
    		if(LoadPreferences("VIEW").equalsIgnoreCase("list"))
    		{
    			setGrid();
                SavePreferences("VIEW", "grid");
    		}
    		else
    		{
    			setList();
                SavePreferences("VIEW", "list");
    		}
    		return true;
    	}
    


    Well, that’s all. Just in case, I will post the project in the archive . And good luck to new Android developers.

    Also popular now: