Image cache using Haneke.

Haneke is a lightweight generic cache for iOS written in Swift 1.2. It’s designed to be super-simple to use. https://github.com/Haneke/HanekeSwift

Open Xcode6 and create a new Single View Application. For product name, use RevivalxHanekeSwift and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Single View Application

Single View Application

Choose options for your new project

Choose options for your new project

Download Haneke for Swift from Github here, https://github.com/Haneke/HanekeSwift. Copy and drag Haneke library into your project.

Finder

Finder

Xcode6 – Project info

Xcode6 – Project info

Don’t forget to set Embedded Binaries. Target > RevivalxHanekeSwift > SwiftEmbedded Binaries.

Embedded Binaries

Embedded Binaries

Set to Compact Width | Any Height.

Compact Width | Any Height

Compact Width | Any Height

Go to the Storyboard and drag an Image View to the main View. Select the Image View and go to the Size inspector and fill in the following values.

 

And image mode change to Aspect Fill.

Image View mode

Image View mode

Open document outline, select the Image View again and set constraint to Center Horizontally in ContainerCenter Vertically in ContainerTop space to Top Layout Guide and Leading Space to Container Margin.

Document Outline and Constraints

Document Outline and Constraints

The Storyboard will look like this.

Main.Storyboard

Main.Storyboard

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Image View to the ViewController class and create the following Outlet.

Image View property outlet

Image View property outlet

Go to the ViewController.swift file, import Haneke and change the viewDidLoad method.

import UIKit
import Haneke

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let url = NSURL(string: "https://graph.facebook.com/10204521055439574/picture?type=large")
        //profilePhotoImage.contentMode = .ScaleAspectFill
        imageView.hnk_setImageFromURL(url!)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Your output.

iOS simulator

iOS simulator

Build and Run the project. You can download the source code here, https://github.com/datomnurdin/RevivalxHaneke.

Android tabhost tutorial

Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves.

Reference: http://developer.android.com/reference/android/widget/TabHost.html

What do you need for this tutorial?

Before we can proceed this tutorial, make sure you already setup your android studio and sdk in your machine. http://www.techotopia.com/index.php/Setting_up_a_Windows,_Linux_or_Mac_OS_X_Android_Studio_Development_Environment

After setup completed, open your android studio and select Start a new Android Studio project.

Start a new Android Studio project

Start a new Android Studio project

For Application name, use RevivalxAndroidTabhost and then fill out the Company Domain with your customary values. Click Next.

Configure your new project

Configure your new project

Select Phone and Tablet and set Minimum SDK to API 15. Click Next.

Target Android Devices

Target Android Devices

Select Blank Activity and click Next.

Add an activity to Mobile

Add an activity to Mobile

Leave it all default. Click Finish.

Customize the Activity

Customize the Activity

Wait until it complete building.

Your initialize project will look like this.

Android Studio

Android Studio

Open your MainActivity.java and extend the class from ActionBarActivity

public class HomeActivity extends ActionBarActivity {

Create a new layout name bottom_tabs.xml under res > layout folder and type the following code.

Add new layout.

Add new layout.

Enter File name as bottom_tabs. Click Ok.

New Resource File

New Resource File

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

Create BaseContainerFragment.java by right click on your package folder. Type the following code respectively.

package com.revivalx.revivalxandroidtabhost;

/**
 * Created by MNurdin on 5/8/15.
 */
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;

public class BaseContainerFragment extends Fragment {

    public void replaceFragment(Fragment fragment, boolean addToBackStack) {
        FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
        if (addToBackStack) {
            transaction.addToBackStack(null);
        }
        transaction.replace(R.id.container_framelayout, fragment);
        transaction.commit();
        getChildFragmentManager().executePendingTransactions();
    }

    public boolean popFragment() {
        boolean isPop = false;
        if (getChildFragmentManager().getBackStackEntryCount() > 0) {
            isPop = true;
            getChildFragmentManager().popBackStack();
        }
        return isPop;
    }

}

Create a new layout name container_fragment.xml under res > layout folder and type the following code.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container_framelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


</FrameLayout>

Next create five container fragments by right click on your package folder and create classes and name them as FirstContainerFragment.java, SecondContainerFragment.java, ThirdContainerFragment.java, FourthContainerFragment.java and FifthContainerFragment.java. Type the following code respectively.

Right Click on package folder > New >  Java Class

FirstContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class FirstContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new FirstFragment(), false);
    }

}

SecondContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class SecondContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new SecondFragment(), false);
    }

}

ThirdContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class ThirdContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new ThirdFragment(), false);
    }

}

FourthContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class FourthContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new FourthFragment(), false);
    }

}

FifthContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class FifthContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new FifthFragment(), false);
    }

}

Now we need 5 fragments and 5 xml layouts for five tabs. So create five fragments by right click on your package folder and create classes and name them as FirstFragment.java, SecondFragment.java, ThirdFragment.java, FourthFragment.java and FifthFragment.java. Type the following code respectively.

Right Click on package folder > New >  Java Class

Create new java class.

Create new java class.

FirstFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FirstFragment extends Fragment {

    public FirstFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.first_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

SecondFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class SecondFragment extends Fragment {

    public SecondFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.second_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

ThirdFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ThirdFragment extends Fragment {

    public ThirdFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.third_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

FourthFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FourthFragment extends Fragment {

    public FourthFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.fourth_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

FifthFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FifthFragment extends Fragment {

    public FifthFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.fifth_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

Now create 5 xml layouts by right clicking on res/layout > New > Layout XML File and name them as first_layout.xml, second_layout.xml, third_layout.xml, fourth_layout.xml and fifth_layout.xml and type the following code in respective files.

Add New Layout XML

Add New Layout XML

Customize the Activity

Customize the Activity

first_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="First Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

second_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="Second Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

third_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="Third Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

fourth_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="Fourth Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

fifth_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="Fifth Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

Each and every tab needs an icon so design icons for each tab. Design each icon in 64 x 64 px and place them in drawable. Download 5 icons from these link below. Don’t forget to rename it into one_64.png, two_64.png, three_64.png, four_64.png and five_64.png.

  1. https://icons8.com/web-app/10962/1
  2. https://icons8.com/web-app/10914/2
  3. https://icons8.com/web-app/10916/3
  4. https://icons8.com/web-app/10915/4
  5. https://icons8.com/web-app/10953/5
icons8

icons8

Android icon states will be define in xml files with default and hover state configurations. For five icons we need the icon state configuration files. So create five xml files under drawable directory. Right click drawable folder select New > Drawable resource file.

New Drawable resource file.

New Drawable resource file.

Create five xml. Use tab_one.xml, tab_two.xml, tab_three.xml, four_tab.xml and five_tab.xml in File name . Click Ok.

New Resource File

New Resource File

Type the following code for icon states.

tab_one.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/one_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/one_64" />
</selector>

tab_two.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/two_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/two_64" />
</selector>

tab_three.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/three_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/three_64" />
</selector>

tab_four.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/four_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/four_64" />
</selector>

tab_five.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/five_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/five_64" />
</selector>

Now open MainActivity.java and type the following code. In the following code we are creating five TabSepcs and adding them to TabHost.

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;


public class MainActivity extends ActionBarActivity {

    private static final String TAB_1_TAG = "one";
    private static final String TAB_2_TAG = "two";
    private static final String TAB_3_TAG = "three";
    private static final String TAB_4_TAG = "four";
    private static final String TAB_5_TAG = "five";
    private FragmentTabHost mTabHost;
    private Menu mainMenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.bottom_tabs);
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        Bundle b = new Bundle();
        b.putString("key", "One");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_1_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_one)),FirstContainerFragment.class, b);

        b = new Bundle();
        b.putString("key", "Two");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_2_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_two)), SecondContainerFragment.class, b);

        b = new Bundle();
        b.putString("key", "Three");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_3_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_three)), ThirdContainerFragment.class, b);

        b = new Bundle();
        b.putString("key", "Four");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_4_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_four)), FourthContainerFragment.class, b);

        b = new Bundle();
        b.putString("key", "Five");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_5_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_five)), FifthContainerFragment.class, b);

    }

    @Override
    public void onBackPressed() {
        boolean isPopFragment = false;
        String currentTabTag = mTabHost.getCurrentTabTag();
        if (currentTabTag.equals(TAB_1_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_1_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_2_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_2_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_3_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_3_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_4_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_4_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_5_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_5_TAG)).popFragment();
        }
        if (!isPopFragment) {
            finish();
        }
    }

}

Now everything is ready and before running your project make sure that you an entry of new activity name in AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.revivalx.revivalxandroidtabhost" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Finally run your project.

Source code: https://github.com/datomnurdin/RevivalxAndroidTabhost

Tutorial geolocation cordova plugin and google map API V3 for iOS and android

It is very easy to detect device’s current location (latitude and longitude) with Cordova org.apache.cordova.geolocation plugin. This plugins detect current location based on GPS, IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. But there is no guarantee that location will be detected precisely enough.

Create project com.revivalx.cordova.geolocation and install geolocation cordova plugin into your cordova project.

cordova plugin add org.apache.cordova.geolocation

Open up your config.xml file and replace with this code.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.geolocation" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>GeolocationCordova</name>
    <description>
        This source code provides example about the device's location, such as latitude and longitude.
    </description>
    <author email="nurdinnorazanservices@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

After that you need to add iOS and android platform into your cordova project using this command. If you using windows, you can’t create iOS platform because you need iOS SDK installed in your machine.

cordova platform add iOS
cordova platform add android
cordova platform add

cordova platform add

Open up index.html file in www folder. Replace with this code.

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Geolocation Cordova Plugin</title>
    </head>
    <body>
        
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Then open up index.js file in js folder add replace all with this code

var onSuccess = function(position) {
    alert('Latitude: '          + position.coords.latitude          + '\n' +
          'Longitude: '         + position.coords.longitude         + '\n' +
          'Altitude: '          + position.coords.altitude          + '\n' +
          'Accuracy: '          + position.coords.accuracy          + '\n' +
          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
          'Heading: '           + position.coords.heading           + '\n' +
          'Speed: '             + position.coords.speed             + '\n' +
          'Timestamp: '         + position.timestamp                + '\n');
};

function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

Build and run the app. I hope you enjoy this article. You may download the source code here, https://github.com/datomnurdin/com.revivalx.cordova.geolocation .

Link multiple view controllers into one container view and switch between them using segmented control using Swift.

Open Xcode6 and create a new Single View Application. For product name, use container and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Single View Application

Single View Application

Choose options for your new project

Choose options for your new project

Set to Compact Width | Any Height.

Compact Width | Any Height

Compact Width | Any Height

Go to the Storyboard and drag an Segmented Control to the main View. Select the Segmented Control and go to the Size inspector and fill in the following values.

Open document outline, select the Segmented Control again and drag from inside the Segmented Control just to to left and right will still in the Segmented Control. Hold down the Ctrl key and select the Leading Space to Container Margin and Trailing Space to Container Margin Auto Layout options. Select the Segmented Control again and drag from the Segmented Control to the top of the view. Hold down the Ctrl key and select Top space to Top Layout Guide in Container options.

Document Outline and Constraints

Document Outline and Constraints

Go to the Storyboard and drag an Container View to the main View. Select the Container View and go to the Size inspector and fill in the following values.

Open document outline, select the Container View again and drag from inside the Container View just to to left and right will still in the Container View. Hold down the Ctrl key and select the Leading Space to Container Margin and Trailing Space to Container Margin Auto Layout options. Select the Container View again and drag from the Container View to the top of the view. Hold down the Ctrl key and select Top space to Top Layout Guide and Aspect Ratio in Container options.

Document Outline and Constraints

Document Outline and Constraints

The Storyboard will look like this.

Main.Storyboard

Main.Storyboard

Do one more time for another Container View. Make sure it’s overlapping with previous Container View.

After that put two Labels in both View Controllers that connected with Container View.

View Controller

View Controller

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Segmented Control to the ViewController class and create the following Outlet. Same goes to both Container Views.

Segmented Control property outlet

Segmented Control property outlet

First Container View

First Container View

Second Container View

Second Container View

Ctrl and drag from the Segmented Control again to the ViewController class and create the following Action.

indexChanged Segmented Control action

indexChanged Segmented Control action

Go to the ViewController.swift file and change the viewDidLoad method.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var segmentedControl: UISegmentedControl!
    @IBOutlet weak var firstView: UIView!
    @IBOutlet weak var secondView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        firstView.hidden = false
        secondView.hidden = true
        // Do any additional setup after loading the view.
    }

}

Then change the indexChanged action.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var segmentedControl: UISegmentedControl!
    @IBOutlet weak var firstView: UIView!
    @IBOutlet weak var secondView: UIView!

    @IBAction func indexChanged(sender: UISegmentedControl) {
        switch segmentedControl.selectedSegmentIndex
        {
        case 0:
            firstView.hidden = false
            secondView.hidden = true
        case 1:
            firstView.hidden = true
            secondView.hidden = false
        default:
            break;
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        firstView.hidden = false
        secondView.hidden = true
        // Do any additional setup after loading the view.
    }

}

Build and Run the project. You can download the source code here, https://github.com/datomnurdin/com.revivalx.container.